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);
}