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

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

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

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

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

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

以下のコードは、世界の主要都市の場所を含むシェイプ ファイルを読み込むための IgrShapefileRecord オブジェクトのインスタンスを作成します。また、xamGeographicMap コントロールにデータをバインドするための前提条件として ImportCompleted イベントを処理する方法も示します。

import { IgrShapeDataSource } from 'igniteui-react-core';
// ...

const sds = new IgrShapeDataSource();
sds.importCompleted = this.onShapePolylinesLoaded;
sds.shapefileSource = url + "/shapes/WorldCableRoutes.shp";
sds.databaseSource  = url + "/shapes/WorldCableRoutes.dbf";
sds.dataBind();

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

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

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

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

コード スニペット

このコード例は、シェープ ファイルが IgrShapefileRecord を使用して読み込まれたことを前提としています。 以下のコードは、マップ コンポーネント内の IgrGeographicPolylineSeries を IgrShapefileRecord にバインドし、すべての IgrShapefileRecord オブジェクトの Points プロパティをマップします。

import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
// ...

public onShapePolylinesLoaded(sds: IgrShapeDataSource, e: any) {
    const geoPolylines: any[] = [];
    for (const record of sds.getPointData()) {
            // using field/column names from .DBF file
            const route = {
                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"]
            };
            geoPolylines.push(route);
        }

    const geoSeries = new IgrGeographicPolylineSeries( { name: "series" });
    geoSeries.dataSource = geoPolylines;
    geoSeries.shapeMemberPath = "points";
    geoSeries.shapeFilterResolution = 0.0;
    geoSeries.shapeStrokeThickness = 3;
    geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
    geoSeries.tooltipTemplate = this.createTooltip;
    this.geoMap.series.add(symbolSeries);
}

API リファレンス