React 地理ポリゴンマップ

React マップコンポーネントでは、IgrGeographicShapeSeries を使用して、地理的コンテキストで形状ポリゴンを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、地理的位置で定義される国々または領域の図形を描画するためにしばしば使用されます。

React 地理ポリゴンマップの例

IgrGeographicShapeSeries は、地理空間データがポリラインではなくポリゴンでレンダリングされる以外、IgrGeographicPolylineSeries とほとんど同じです。

データ要件

マップコントロールの他の種類の地理的シリーズと同様に、IgrGeographicShapeSeries には、オブジェクトの配列にバインドできる ItemsSource プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、shapeMemberPath プロパティにマップされます。IgrGeographicShapeSeries は、マップされたデータ列の点を使用してマップコントロールにポリゴンをプロットします。

コードスニペット

以下のコードは、IgrShapeDataSource を使用してシェイプファイルからロードした世界の国々の図形に IgrGeographicShapeSeries をバインドする方法を示します。

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { IgrShapeDataSource } from 'igniteui-react-core';

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

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

public onMapReferenced(map: IgrGeographicMap) {
    this.geoMap = map;
    const sds = new IgrShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = "/shapes/WorldCountries.shp";
    sds.databaseSource  = "/shapes/WorldCountries.dbf";
    sds.dataBind();
}

public onDataLoaded(sds: IgrShapeDataSource, e: any) {
    const countriesNATO: any[] = [];
    const countriesSCO: any[] = [];
    const countriesARAB: any[] = [];
    const countriesOther: any[] = [];

    for (const record of sds.getPointData()) {
        // using field/column names from .DBF file
        const country = {
            points: record.points,
            name: record.fieldValues.Name,
            org: record.fieldValues.Alliance,
            pop: record.fieldValues.Population
        };
        const group = record.fieldValues.Alliance;
        if (group === "NATO") {
            countriesNATO.push(country);
        } else if (group === "SCO") {
            countriesSCO.push(country);
        } else if (group === "ARAB LEAGUE") {
            countriesARAB.push(country);
        } else {
            countriesOther.push(country);
        }
    }
    this.createSeries(countriesNATO, "rgb(32, 146, 252)", "NATO");
    this.createSeries(countriesSCO, "rgb(252, 32, 32)", "SCO");
    this.createSeries(countriesARAB, "rgb(14, 194, 14)", "AL");
    this.createSeries(countriesOther, "rgb(146, 146, 146)", "Other");
}

public createSeries(shapeData: any[], shapeBrush: string, shapeTitle: string)
{
    const seriesName = shapeTitle + "series";
    const geoSeries = new IgrGeographicShapeSeries( { name: seriesName });
    geoSeries.dataSource = shapeData;
    geoSeries.shapeMemberPath = "points";
    geoSeries.brush = shapeBrush;
    geoSeries.outline = "Black";
    geoSeries.thickness = 1;
    geoSeries.title = shapeTitle;
    this.geoMap.series.add(geoSeries);
}

React 地理ポリゴン マップ