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

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

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

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

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

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

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

import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
@ViewChild("map", { static: true } )
private map: IgxGeographicMapComponent
// ...
/**
 * 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: IgxShapeDataSource, e: any, map: IgxGeographicMapComponent): 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 IgxGeographicPolylineSeriesComponent;
        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 IgxShapeDataSource();
sds.importCompleted.subscribe((s: IgxShapeDataSource, e: any) => readers.readRoutes(s, e, map));
sds.shapefileSource = root + "WorldCableRoutes.shp";
sds.databaseSource = root + "WorldCableRoutes.dbf";
sds.dataBind();

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

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

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

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

コード スニペット

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

<igx-geographic-map
    #map
    height="100%"
    width="100%"
    zoomable="true">
    <igx-geographic-polyline-series
        #lineSeries
        shapeMemberPath="points"
        shapeFilterResolution=0
        shapeStrokeThickness=3
        shapeStroke="rgb(82, 82, 82, 0.4)">
    </igx-geographic-polyline-series>
</igx-geographic-map>

API リファレンス

fields