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

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

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

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

プロパティ	型	概要
`shapefileSource`	string	シェイプファイル(.shp) から読み込まれた 1 つの地理空間シェープにすべてのポイントが含まれます。
`databaseSource`	string	たとえば、シェープファイルで日本は、以下でポイントオブジェクトリストのリストとして表されます。

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

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

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

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

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

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

プロパティ概要

プロパティ	概要
`Points`	シェイプファイル(.shp) から読み込まれた 1 つの地理空間シェープにすべてのポイントが含まれます。たとえば、シェープファイルで日本は、以下でポイントオブジェクトリストのリストとして表されます。ポイントの最初のリストは北海道のシェイプを表します。ポイントの 2 番目のリストは本州のシェイプを表します。ポイントの 3 番目のリストは九州のシェイプを表します。ポイントの 4 番目のリストは四国のシェイプを表します。

Points

シェイプファイル(.shp) から読み込まれた 1 つの地理空間シェープにすべてのポイントが含まれます。たとえば、シェープファイルで日本は、以下でポイントオブジェクトリストのリストとして表されます。

ポイントの最初のリストは北海道のシェイプを表します。
ポイントの 2 番目のリストは本州のシェイプを表します。
ポイントの 3 番目のリストは九州のシェイプを表します。
ポイントの 4 番目のリストは四国のシェイプを表します。

| | `Fields` |列名でキーが付けられたシェイプデータベースファイル (.dbf) からのデータ行を含みます。たとえば、日本についてのデータには、人口、地域、首都名などが含まれます。|

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

コードスニペット

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

<div className="sampleRoot" >
    <igx-geographic-map #map
        width="700px"
        height="500px"
        zoomable="true" >
    </igx-geographic-map>
</div>

<ng-template let-series="series" let-item="item" #template>
            <div>
                <span>
                Airline: {{item.name}}
                </span>
                <br />
                <span>
                Length: {{item.distance}} miles
                </span>
            </div>
</ng-template>

import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';

@Component({
  selector: "app-map-binding-shape-files",
  styleUrls: ["./map-binding-shape-files.component.scss"],
  templateUrl: "./map-binding-shape-files.component.html"
})
export class MapBindingShapefilePolylinesComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;

    @ViewChild("template")
    public tooltipTemplate: TemplateRef<object>;
    constructor() { }

    public ngAfterViewInit() {
    // loading a shapefile with geographic polygons
    const sds = new IgxShapeDataSource();
    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
    sds.shapefileSource = "assets/Shapes/WorldCableRoutes.shp";
    sds.databaseSource  = "assets/Shapes/WorldCableRoutes.dbf";
    sds.dataBind();
    }
    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
        const shapeRecords = sds.getPointData();
        const geoPolylines: any[] = [];
        // parsing shapefile data and creating geo-polygons
        for (const record of shapeRecords) {
            // using field/column names from .DBF file
            const route = {
                capacity: record.fieldValues["CapacityG"],
                distance: record.fieldValues["DistanceKM"],
                isActive: record.fieldValues["NotLive"] !== 0,
                isOverLand: record.fieldValues["OverLand"] === 0,
                name: record.fieldValues["Name"],
                points: record.points,
                service: record.fieldValues["InService"]
            };
            geoPolylines.push(route);
        }

        const geoSeries = new IgxGeographicPolylineSeriesComponent();
        geoSeries.dataSource = geoPolylines;
        geoSeries.shapeMemberPath = "points";
        geoSeries.shapeFilterResolution = 0.0;
        geoSeries.shapeStrokeThickness = 3;
        geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
        geoSeries.tooltipTemplate = this.tooltipTemplate;

        this.map.series.add(geoSeries);
        }
}

API リファレンス

Fields
IgxGeographicPolylineSeriesComponent
ImportCompleted
ItemsSource
Points
IgxShapeDataSource

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