Premium

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

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

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

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

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

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

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

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

import { IgxGeographicShapeSeriesComponent, IgxGeographicPolylineSeriesComponent, IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';

import { IgxGeographicMapModule } from 'igniteui-angular-maps';
import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
// ...
// app.module.ts
@NgModule({
    imports: [
    IgxGeographicMapModule,
    IgxDataChartInteractivityModule
    ]
})
export class AppModule { }

シリーズの作成

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

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    zoomable="true">
    <igx-geographic-shape-series
        #polygonSeries
        shapeMemberPath="points"
        shapeFill="rgb(150, 150, 150)"
        shapeStroke="Black"
        shapeStrokeThickness=1>
    </igx-geographic-shape-series>
    <igx-geographic-polyline-series
        #lineSeries
        shapeMemberPath="points"
        shapeStroke="rgba(147, 15, 180, 0.5)"
        thickness=3>
    </igx-geographic-polyline-series>
    <igx-geographic-symbol-series
        #symbolSeries
        longitudeMemberPath="longitude"
        latitudeMemberPath="latitude"
        markerType="Circle"
        markerOutline="rgba(2, 102, 196, 1)"
        markerBrush="White">
    </igx-geographic-symbol-series>
</igx-geographic-map>

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

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

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

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

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

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

ポリゴンの処理

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

/** Country shapes, with the fields the tooltip shows taken from the .DBF file. */
public readPolygons(sds: IgxShapeDataSource, e: any, map: IgxGeographicMapComponent): 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 IgxGeographicShapeSeriesComponent;
    shapeSeries.dataSource = geoPolygons;
}

ポリラインの処理

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

/** Connections between places, each record one path. */
public readPolylines(sds: IgxShapeDataSource, e: any, map: IgxGeographicMapComponent): 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 IgxGeographicPolylineSeriesComponent;
    lineSeries.dataSource = geoPolylines;
}

ポイントの処理

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

/** Cities with a known population, one point per record. */
public readPoints(sds: IgxShapeDataSource, e: any, map: IgxGeographicMapComponent): 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 IgxGeographicSymbolSeriesComponent;
    symbolSeries.dataSource = geoLocations;
}

マップ背景

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

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    [backgroundContent]="null">
</igx-geographic-map>

概要

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

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    zoomable="true">
    <igx-geographic-shape-series
        #polygonSeries
        shapeMemberPath="points"
        shapeFill="rgb(150, 150, 150)"
        shapeStroke="Black"
        shapeStrokeThickness=1>
    </igx-geographic-shape-series>
    <igx-geographic-polyline-series
        #lineSeries
        shapeMemberPath="points"
        shapeStroke="rgba(147, 15, 180, 0.5)"
        thickness=3>
    </igx-geographic-polyline-series>
    <igx-geographic-symbol-series
        #symbolSeries
        longitudeMemberPath="longitude"
        latitudeMemberPath="latitude"
        markerType="Circle"
        markerOutline="rgba(2, 102, 196, 1)"
        markerBrush="White">
    </igx-geographic-symbol-series>
</igx-geographic-map>

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

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

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

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

API リファレンス

IgxGeographicPolylineSeriesComponent
IgxGeographicShapeSeriesComponent
IgxGeographicSymbolSeriesComponent
IgxShapefileRecord

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