React シェープ ファイルを地理的データにバインディング

Ignite UI for React Map コンポーネントの IgrShapeDataSource クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを IgrShapefileRecord オブジェクトのコレクションに変換します。

React シェープ ファイルを地理的データにバインディングの例

以下の表は、シェイプ ファイルを読み込むための IgrShapeDataSource クラスのプロパティを説明します。

両方のソース プロパティが null 以外の値に設定されると、IgrShapeDataSource オブジェクトの ImportAsync メソッドが起動し、シェイプ ファイルを取得して読み込み、最終的に変換を実行します。この操作が完了すると、IgrShapeDataSource は IgrShapefileRecord オブジェクトで生成され、シェイプ ファイルから地理空間データを読み込んで変換するプロセスが完了したことを通知するために、importCompleted イベントが起動されます。

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

以下のコードは、世界の海底ケーブル ルートを含むシェイプ ファイルを読み込むための IgrShapeDataSource オブジェクトのインスタンスを作成します。また、Map コンポーネントにデータをバインドするための前提条件として importCompleted イベントを処理する方法も示します。

import { IgrShapeDataSource } from 'igniteui-react-core';
private map: IgrGeographicMap
private mapRef(r: IgrGeographicMap) {
    this.map = r;
    this.setState({});
}
// ...
/**
 * What the shapefile becomes once it has loaded: records turned into routes, bound to the series that
 * draws them.
 *
 * A handler for the shape data source's importCompleted, and the source is created in code by the item
 * that requires this one — so there is nothing in a description to bind it to, and it is not an
 * initializer either.
 */
export class MapShpFileReaders {

    /** Each record is one cable route, with the fields the shapefile's database holds beside it. */
    public readRoutes(sds: IgrShapeDataSource, e: any, map: IgrGeographicMap): void {
        var geoRoutes: any[] = [];
        var pointData = sds.getPointData();
        // parsing shapefile data and creating geo-locations
        for (var i = 0; i < pointData.length; i++) {
            var record = pointData[i];
            // using field/column names from .DBF file
            geoRoutes.push({
                points: record.points,
                name: record.fieldValues.Name,
                capacity: record.fieldValues.CapacityG,
                distance: record.fieldValues.DistanceKM
            });
        }

        var lineSeries = map.series.item(0) as IgrGeographicPolylineSeries;
        lineSeries.dataSource = geoRoutes;
    }
}
// ...
private mapShpFileReaders: MapShpFileReaders = new MapShpFileReaders();
var root = "https://static.infragistics.com/xplatform/shapes/";
var readers = this.mapShpFileReaders;
var map = this.map;

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

シェープファイルをバインド

Map コンポーネントでは、Geographic Series は、シェイプ ファイルから読み込まれる地理的データを表示するために使用されます。すべてのタイプの地理的シリーズには、オブジェクトの配列にバインドできる dataSource プロパティがあります。IgrShapeDataSource が生成するものは、その各項目が IgrShapefileRecord であるため、このような配列の例です。

IgrShapefileRecord クラスは、以下の表にリストする地理的データを保存するためのプロパティを提供します。

このデータ構造は、適切なデータ列がマップされている限り、ほとんどの地理的シリーズでの使用に適しています。

コード スニペット

このコード例は、シェープ ファイルが IgrShapeDataSource を使用して読み込まれたことを前提としています。 以下のコードは、マップ コンポーネント内の IgrGeographicPolylineSeries をそのソースが生成したレコードにバインドし、各 IgrShapefileRecord の IgrShapefileRecord.points プロパティを shapeMemberPath でマップします。

<IgrGeographicMap
    ref={this.mapRef}
    height="100%"
    width="100%"
    zoomable={true}>
    <IgrGeographicPolylineSeries
        name="lineSeries"
        ref={ref => { this.lineSeries = ref; }}
        shapeMemberPath="points"
        shapeFilterResolution={0}
        shapeStrokeThickness={3}
        shapeStroke="rgb(82, 82, 82, 0.4)" />
</IgrGeographicMap>

API リファレンス

fields