Web Components 地理記号マップ

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

Web Components 地理記号マップの例

データ要件

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

コード スニペット

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

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

API リファレンス