Web Components 地理記号マップ

Web Components マップコンポーネントでは、IgcGeographicSymbolSeriesComponent を使用して、地理的コンテキストでポイントまたはマーカーを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市、空港、地震または興味のあるポイントなどの地理的位置のコレクションを描画するためにしばしば使用されます。

Web Components 地理記号マップの例

データ要件

マップコンポーネントの他の種類の地理的シリーズと同様に、IgcGeographicSymbolSeriesComponent には、オブジェクトの配列にバインドできる ItemsSource プロパティがあります。さらに、このオブジェクトの各データ項目は、地理的位置 (経度と緯度) を保存する 2 つの数値データ列を持つ必要があります。これらのデータ列は、latitudeMemberPath および longitudeMemberPath プロパティにマップされます。IgcGeographicSymbolSeriesComponent は、これらのマップされたデータ列の値を使用して、地理マップコンポーネントにシンボル要素をプロットします。

コードスニペット

以下のコードは、IgcShapeDataSource を使用してシェイプファイルからロードした都市の場所に IgcGeographicSymbolSeriesComponent をバインドする方法を示します。

<igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>

import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { MarkerType } from 'igniteui-webcomponents-charts';
//...
connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
    this.addSeriesWith(WorldLocations.getCities(), "Gray");
    this.addSeriesWith(WorldLocations.getCapitals(),"rgb(32, 146, 252)");
}

addSeriesWith(locations: any[], brush: string)
{
    const symbolSeries = new IgcGeographicSymbolSeriesComponent ();
    symbolSeries.dataSource = locations;
    symbolSeries.markerType = MarkerType.Circle;
    symbolSeries.latitudeMemberPath = "lat";
    symbolSeries.longitudeMemberPath = "lon";
    symbolSeries.markerBrush  = "White";
    symbolSeries.markerOutline = brush;

    this.geoMap.series.add(symbolSeries);
}

Web Components 地理記号マップ