Premium

Angular 複数データソースのバインド

Ignite UI for Angular マップでは、カスタムデータソースを地理空間データとオーバーレイするために複数の地理的シリーズオブジェクトを追加できます。たとえば、空港の地理的位置をプロットするための IgxGeographicSymbolSeriesComponent、空港間のフライトをプロットするための IgxGeographicPolylineSeriesComponent、主要な地理座標のグリッド線をプロットするための別の IgxGeographicPolylineSeriesComponent などです。

Angular 複数データソースのバインドの例

このトピックでは、以下の地理空間データをプロットする複数の地理的シリーズを表示するための手順を説明します。

IgxGeographicSymbolSeriesComponent – 主要空港の場所を表示します。
IgxGeographicPolylineSeriesComponent – 空港間のフライトを表示します。
IgxGeographicPolylineSeriesComponent – 主座標のグリッド線を表示します。

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

データソースの作成

Ignite UI for Angular マップに表示するすべての地理的シリーズのデータソースを作成します。たとえば、WorldConnections スクリプトを使用できます。

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    zoomable="true">
</igx-geographic-map>

フライトのオーバーレイ

主要空港間のフライト接続を持つ最初の IgxGeographicPolylineSeriesComponent オブジェクトを作成し、Ignite UI for Angular マップの Series コレクションに追加します。

<igx-geographic-polyline-series
    #lineSeries
    [dataSource]="worldFlights"
    shapeMemberPath="points"
    shapeStroke="rgba(196, 14, 14, 0.05)"
    shapeStrokeThickness=4>
</igx-geographic-polyline-series>

グリッド線のオーバーレイ

地理グリッド線を使用して2番目の IgxGeographicPolylineSeriesComponent オブジェクトを作成し、それを GeographicMap の Series コレクションに追加します。

<igx-geographic-polyline-series
    #gridSeries
    [dataSource]="worldGridlines"
    shapeMemberPath="points"
    shapeStroke="Gray"
    shapeStrokeThickness=1>
</igx-geographic-polyline-series>

空港のオーバーレイ

空港ポイントを使用して IgxGeographicSymbolSeriesComponent オブジェクトを作成し、それを Ignite UI for Angular 地理マップの Series コレクションに追加します。

<igx-geographic-symbol-series
    #symbolSeries
    [dataSource]="worldAirports"
    latitudeMemberPath="lat"
    longitudeMemberPath="lon"
    markerType="Circle"
    markerBrush="rgba(170, 211, 223, 1)"
    markerOutline="rgba(73, 73, 73, 1)"
    thickness=1>
</igx-geographic-symbol-series>

まとめ

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

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

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    zoomable="true">
    <igx-geographic-polyline-series
        #lineSeries
        [dataSource]="worldFlights"
        shapeMemberPath="points"
        shapeStroke="rgba(196, 14, 14, 0.05)"
        shapeStrokeThickness=4>
    </igx-geographic-polyline-series>
    <igx-geographic-polyline-series
        #gridSeries
        [dataSource]="worldGridlines"
        shapeMemberPath="points"
        shapeStroke="Gray"
        shapeStrokeThickness=1>
    </igx-geographic-polyline-series>
    <igx-geographic-symbol-series
        #symbolSeries
        [dataSource]="worldAirports"
        latitudeMemberPath="lat"
        longitudeMemberPath="lon"
        markerType="Circle"
        markerBrush="rgba(170, 211, 223, 1)"
        markerOutline="rgba(73, 73, 73, 1)"
        thickness=1>
    </igx-geographic-symbol-series>
</igx-geographic-map>

API リファレンス

IgxGeographicPolylineSeriesComponent
IgxGeographicSymbolSeriesComponent

Angular 複数データ ソースのバインド