React 地理記号マップ
React マップ コンポーネントでは、IgrGeographicSymbolSeries
を使用して、地理的コンテキストでポイントまたはマーカーを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市、空港、地震または興味のあるポイントなどの地理的位置のコレクションを描画するためにしばしば使用されます。
React 地理記号マップの例
データ要件
マップコンポーネントの他の種類の地理的シリーズと同様に、IgrGeographicSymbolSeries
には、オブジェクトの配列にバインドできる ItemsSource
プロパティがあります。さらに、このオブジェクトの各データ項目は、地理的位置 (経度と緯度) を保存する 2 つの数値データ列を持つ必要があります。これらのデータ列は、latitudeMemberPath
および longitudeMemberPath
プロパティにマップされます。IgrGeographicSymbolSeries
は、これらのマップされたデータ列の値を使用して、地理マップコンポーネントにシンボル要素をプロットします。
コード スニペット
以下のコードは、IgrShapeDataSource
を使用してシェイプ ファイルからロードした都市の場所に 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);
}