Premium

React 複数のシェイプファイルのバインドとオーバーレイ

Ignite UI for React マップでは、複数の地理的シリーズオブジェクトを追加して、複数のシェープファイルを地理空間データでオーバーレイすることができます。たとえば、港湾の地理的位置をプロットするための IgrGeographicSymbolSeries、港湾間のルートをプロットするための IgrGeographicPolylineSeries、国の形状をプロットするための IgrGeographicShapeSeries などがあります。

React 複数のシェイプファイルのバインドとオーバーレイの例

このトピックでは、マップコンポーネントに複数の地理的シリーズを表示する方法について段階的に説明します。すべての地理的シリーズは、IgrShapefileRecord クラスを使用して形状ファイルからロードされた地理空間データに従ってプロットします。IgrShapefileRecord オブジェクトの詳細については、シェープファイルのバインディングのトピックを参照してください。

IgrGeographicSymbolSeries – 主要都市の場所を表示します。
IgrGeographicPolylineSeries – 主要ポート間のルートを表示します。
IgrGeographicShapeSeries – 世界の国々の形を表示します。

目的のデータをプロットするために、地理的シリーズを上記の組み合わせまたは他の組み合わせで使用できます。

コンポーネントのインポート

まず、必要なコンポーネントとモジュールをインポートします。

import { IgrGeographicMap, IgrGeographicShapeSeries, IgrGeographicPolylineSeries, IgrGeographicSymbolSeries } from 'igniteui-react-maps';
import { IgrShapeDataSource } from 'igniteui-react-core';

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
// ...
const mods: any[] = [
    IgrGeographicMapModule,
    IgrDataChartInteractivityModule
];
mods.forEach((m) => m.register());

シリーズの作成

次に、後で異なるタイプのシェープファイルをロードする地理的シリーズでマップを作成します。

<IgrGeographicMap
    ref={this.geoMapRef}
    height="100%"
    width="100%"
    zoomable={true}>
    <IgrGeographicShapeSeries
        name="polygonSeries"
        ref={ref => { this.polygonSeries = ref; }}
        shapeMemberPath="points"
        shapeFill="rgb(150, 150, 150)"
        shapeStroke="Black"
        shapeStrokeThickness={1} />
    <IgrGeographicPolylineSeries
        name="lineSeries"
        ref={ref => { this.lineSeries = ref; }}
        shapeMemberPath="points"
        shapeStroke="rgba(147, 15, 180, 0.5)"
        thickness={3} />
    <IgrGeographicSymbolSeries
        name="symbolSeries"
        ref={ref => { this.symbolSeries = ref; }}
        longitudeMemberPath="longitude"
        latitudeMemberPath="latitude"
        markerType="Circle"
        markerOutline="rgba(2, 102, 196, 1)"
        markerBrush="White" />
</IgrGeographicMap>

シェープファイルの読み込み

次に、ページのコンストラクターで、地理マップコンポーネントに表示する各シェープファイルの IgrShapefileRecord を追加します。各ソースには、そのレコードをデータに変換するメソッドが渡されます。これらのメソッドは MapMultipleShapesReaders クラスに属し、以下の各セクションで示します。

import { IgrShapeDataSource } from 'igniteui-react-core';
// ...
private mapMultipleShapesReaders: MapMultipleShapesReaders = new MapMultipleShapesReaders();
// ...
var root = "https://static.infragistics.com/xplatform/shapes/";
var readers = this.mapMultipleShapesReaders;
var map = this.geoMap;

var sdsPolygons = new IgrShapeDataSource();
sdsPolygons.importCompleted = (s: IgrShapeDataSource, e: any) => readers.readPolygons(s, e, map);
sdsPolygons.shapefileSource = root + "WorldCountries.shp";
sdsPolygons.databaseSource = root + "WorldCountries.dbf";
sdsPolygons.dataBind();

var sdsPolylines = new IgrShapeDataSource();
sdsPolylines.importCompleted = (s: IgrShapeDataSource, e: any) => readers.readPolylines(s, e, map);
sdsPolylines.shapefileSource = root + "WorldCableRoutes.shp";
sdsPolylines.databaseSource = root + "WorldCableRoutes.dbf";
sdsPolylines.dataBind();

var sdsLocations = new IgrShapeDataSource();
sdsLocations.importCompleted = (s: IgrShapeDataSource, e: any) => readers.readPoints(s, e, map);
sdsLocations.shapefileSource = root + "WorldCities.shp";
sdsLocations.databaseSource = root + "WorldCities.dbf";
sdsLocations.dataBind();

ポリゴンの処理

世界の国々の IgrShapefileRecord に読み込まれた形状データを処理し、IgrGeographicShapeSeries オブジェクトに割り当てます。

/** Country shapes, with the fields the tooltip shows taken from the .DBF file. */
public readPolygons(sds: IgrShapeDataSource, e: any, map: IgrGeographicMap): void {
    var geoPolygons: any[] = [];
    var pointData = sds.getPointData();
    // parsing shapefile data and creating geo-polygons
    for (var i = 0; i < pointData.length; i++) {
        var record = pointData[i];
        // using field/column names from .DBF file
        geoPolygons.push({
            points: record.points,
            name: record.fieldValues.NAME,
            gdp: record.fieldValues.GDP,
            population: record.fieldValues.POPULATION
        });
    }

    var shapeSeries = map.series.item(0) as IgrGeographicShapeSeries;
    shapeSeries.dataSource = geoPolygons;
}

ポリラインの処理

IgrShapefileRecord に読み込まれた形状データを処理し、主要都市間の通信ルートを使用して、IgrGeographicPolylineSeries オブジェクトに割り当てます。

/** Connections between places, each record one path. */
public readPolylines(sds: IgrShapeDataSource, e: any, map: IgrGeographicMap): void {
    var geoPolylines: any[] = [];
    var pointData = sds.getPointData();
    // parsing shapefile data and creating geo-polylines
    for (var i = 0; i < pointData.length; i++) {
        var record = pointData[i];
        // using field/column names from .DBF file
        geoPolylines.push({
            points: record.points,
            name: record.fieldValues.Name,
            capacity: record.fieldValues.CapacityG,
            distance: record.fieldValues.DistanceKM,
            isOverLand: record.fieldValues.OverLand === 0,
            isActive: record.fieldValues.NotLive !== 0,
            service: record.fieldValues.InService
        });
    }

    var lineSeries = map.series.item(1) as IgrGeographicPolylineSeries;
    lineSeries.dataSource = geoPolylines;
}

ポイントの処理

IgrShapefileRecord に読み込まれた世界各国の形状データを処理し、IgrGeographicSymbolSeries オブジェクトに割り当てます。

/** Cities with a known population, one point per record. */
public readPoints(sds: IgrShapeDataSource, e: any, map: IgrGeographicMap): void {
    var geoLocations: any[] = [];
    var pointData = sds.getPointData();
    // parsing shapefile data and creating geo-locations
    for (var i = 0; i < pointData.length; i++) {
        var record = pointData[i];
        var pop = record.fieldValues.POPULATION;
        if (pop > 0) {
            // each of these records holds a single point
            // using field/column names from .DBF file
            geoLocations.push({
                latitude: record.points[0][0].y,
                longitude: record.points[0][0].x,
                city: record.fieldValues.NAME,
                population: pop
            });
        }
    }

    var symbolSeries = map.series.item(2) as IgrGeographicSymbolSeries;
    symbolSeries.dataSource = geoLocations;
}

マップ背景

また形状ファイルがアプリケーションのために十分な地理的文脈 (国の形状など) を提供した際に、地図背景コンテンツで地理的画像を非表示にしたい場合があります。

<IgrGeographicMap
    ref={this.geoMapRef}
    height="100%"
    width="100%"
    backgroundContent={null} />

概要

上記すべてのコードスニペットを以下のコードブロックにまとめて、プロジェクトに簡単にコピーできます。

<IgrGeographicMap
    ref={this.geoMapRef}
    height="100%"
    width="100%"
    zoomable={true}>
    <IgrGeographicShapeSeries
        name="polygonSeries"
        ref={ref => { this.polygonSeries = ref; }}
        shapeMemberPath="points"
        shapeFill="rgb(150, 150, 150)"
        shapeStroke="Black"
        shapeStrokeThickness={1} />
    <IgrGeographicPolylineSeries
        name="lineSeries"
        ref={ref => { this.lineSeries = ref; }}
        shapeMemberPath="points"
        shapeStroke="rgba(147, 15, 180, 0.5)"
        thickness={3} />
    <IgrGeographicSymbolSeries
        name="symbolSeries"
        ref={ref => { this.symbolSeries = ref; }}
        longitudeMemberPath="longitude"
        latitudeMemberPath="latitude"
        markerType="Circle"
        markerOutline="rgba(2, 102, 196, 1)"
        markerBrush="White" />
</IgrGeographicMap>

import { IgrShapeDataSource } from 'igniteui-react-core';
// ...
private mapMultipleShapesReaders: MapMultipleShapesReaders = new MapMultipleShapesReaders();
// ...
var root = "https://static.infragistics.com/xplatform/shapes/";
var readers = this.mapMultipleShapesReaders;
var map = this.geoMap;

var sdsPolygons = new IgrShapeDataSource();
sdsPolygons.importCompleted = (s: IgrShapeDataSource, e: any) => readers.readPolygons(s, e, map);
sdsPolygons.shapefileSource = root + "WorldCountries.shp";
sdsPolygons.databaseSource = root + "WorldCountries.dbf";
sdsPolygons.dataBind();

var sdsPolylines = new IgrShapeDataSource();
sdsPolylines.importCompleted = (s: IgrShapeDataSource, e: any) => readers.readPolylines(s, e, map);
sdsPolylines.shapefileSource = root + "WorldCableRoutes.shp";
sdsPolylines.databaseSource = root + "WorldCableRoutes.dbf";
sdsPolylines.dataBind();

var sdsLocations = new IgrShapeDataSource();
sdsLocations.importCompleted = (s: IgrShapeDataSource, e: any) => readers.readPoints(s, e, map);
sdsLocations.shapefileSource = root + "WorldCities.shp";
sdsLocations.databaseSource = root + "WorldCities.dbf";
sdsLocations.dataBind();

API リファレンス

IgrGeographicPolylineSeries
IgrGeographicShapeSeries
IgrGeographicSymbolSeries
IgrShapefileRecord

React 複数のシェイプ ファイルのバインドとオーバーレイ