Premium

React 地理記号マップ

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

React 地理記号マップの例

データ要件

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

コードスニペット

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


import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { MarkerType } from 'igniteui-react-charts';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
// ...

public render() {
    return (
    <IgrGeographicMap
        ref={this.onMapReferenced}
        width="600px"
        height="600px"
        zoomable="true" />
    );
}

public onMapReferenced(map: IgrGeographicMap) {
    this.geoMap = map;
    this.addSeries(WorldLocations.getCities(), "Gray");
    this.addSeries(WorldLocations.getCapitals(),"rgb(32, 146, 252)");
}

public addSeries(locations: any[], brush: string)
{
    const symbolSeries = new IgrGeographicSymbolSeries ( { name: "symbolSeries" });
    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 リファレンス

IgrGeographicSymbolSeries
IgrShapefileRecord

React 地理記号マップ