Premium

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

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

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

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

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

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

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

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

import { IgcGeographicMapComponent, IgcGeographicShapeSeriesComponent, IgcGeographicPolylineSeriesComponent, IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';

import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// ...
ModuleManager.register(
    IgcGeographicMapModule,
    IgcDataChartInteractivityModule
);

シリーズの作成

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

<igc-geographic-map
    id="geoMap"
    height="100%"
    width="100%"
    zoomable="true">
    <igc-geographic-shape-series
        id="polygonSeries"
        shape-member-path="points"
        shape-fill="rgb(150, 150, 150)"
        shape-stroke="Black"
        shape-stroke-thickness="1">
    </igc-geographic-shape-series>
    <igc-geographic-polyline-series
        id="lineSeries"
        shape-member-path="points"
        shape-stroke="rgba(147, 15, 180, 0.5)"
        thickness="3">
    </igc-geographic-polyline-series>
    <igc-geographic-symbol-series
        id="symbolSeries"
        longitude-member-path="longitude"
        latitude-member-path="latitude"
        marker-type="Circle"
        marker-outline="rgba(2, 102, 196, 1)"
        marker-brush="White">
    </igc-geographic-symbol-series>
</igc-geographic-map>

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

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

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

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

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

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

ポリゴンの処理

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

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

ポリラインの処理

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

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

ポイントの処理

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

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

マップ背景

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

<igc-geographic-map
    id="geoMap"
    height="100%"
    width="100%">
</igc-geographic-map>

// fields:
private geoMap: IgcGeographicMapComponent

// initialization:
var geoMap = this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;

// bindings:
geoMap.backgroundContent = null;

概要

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

<igc-geographic-map
    id="geoMap"
    height="100%"
    width="100%"
    zoomable="true">
    <igc-geographic-shape-series
        id="polygonSeries"
        shape-member-path="points"
        shape-fill="rgb(150, 150, 150)"
        shape-stroke="Black"
        shape-stroke-thickness="1">
    </igc-geographic-shape-series>
    <igc-geographic-polyline-series
        id="lineSeries"
        shape-member-path="points"
        shape-stroke="rgba(147, 15, 180, 0.5)"
        thickness="3">
    </igc-geographic-polyline-series>
    <igc-geographic-symbol-series
        id="symbolSeries"
        longitude-member-path="longitude"
        latitude-member-path="latitude"
        marker-type="Circle"
        marker-outline="rgba(2, 102, 196, 1)"
        marker-brush="White">
    </igc-geographic-symbol-series>
</igc-geographic-map>

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

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

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

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

API リファレンス

IgcGeographicPolylineSeriesComponent
IgcGeographicShapeSeriesComponent
IgcGeographicSymbolSeriesComponent
IgcShapefileRecord

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