Premium

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

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

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

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

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

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

データソースの作成

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

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

lineSeries.dataSource = this.worldFlights;
gridSeries.dataSource = this.worldGridlines;
symbolSeries.dataSource = this.worldAirports;

フライトのオーバーレイ

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

<igc-geographic-polyline-series
    id="lineSeries"
    shape-member-path="points"
    shape-stroke="rgba(196, 14, 14, 0.05)"
    shape-stroke-thickness="4">
</igc-geographic-polyline-series>

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

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

<igc-geographic-polyline-series
    id="gridSeries"
    shape-member-path="points"
    shape-stroke="Gray"
    shape-stroke-thickness="1">
</igc-geographic-polyline-series>

空港のオーバーレイ

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

<igc-geographic-symbol-series
    id="symbolSeries"
    latitude-member-path="lat"
    longitude-member-path="lon"
    marker-type="Circle"
    marker-brush="rgba(170, 211, 223, 1)"
    marker-outline="rgba(73, 73, 73, 1)"
    thickness="1">
</igc-geographic-symbol-series>

まとめ

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

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

<igc-geographic-map
    id="geoMap"
    height="100%"
    width="100%"
    zoomable="true">
    <igc-geographic-polyline-series
        id="lineSeries"
        shape-member-path="points"
        shape-stroke="rgba(196, 14, 14, 0.05)"
        shape-stroke-thickness="4">
    </igc-geographic-polyline-series>
    <igc-geographic-polyline-series
        id="gridSeries"
        shape-member-path="points"
        shape-stroke="Gray"
        shape-stroke-thickness="1">
    </igc-geographic-polyline-series>
    <igc-geographic-symbol-series
        id="symbolSeries"
        latitude-member-path="lat"
        longitude-member-path="lon"
        marker-type="Circle"
        marker-brush="rgba(170, 211, 223, 1)"
        marker-outline="rgba(73, 73, 73, 1)"
        thickness="1">
    </igc-geographic-symbol-series>
</igc-geographic-map>

// fields:
private geoMap: IgcGeographicMapComponent
private lineSeries: IgcGeographicPolylineSeriesComponent
private gridSeries: IgcGeographicPolylineSeriesComponent
private symbolSeries: IgcGeographicSymbolSeriesComponent

// initialization:
var geoMap = this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
var lineSeries = this.lineSeries = document.getElementById('lineSeries') as IgcGeographicPolylineSeriesComponent;
var gridSeries = this.gridSeries = document.getElementById('gridSeries') as IgcGeographicPolylineSeriesComponent;
var symbolSeries = this.symbolSeries = document.getElementById('symbolSeries') as IgcGeographicSymbolSeriesComponent;

// bindings:
lineSeries.dataSource = this.worldFlights;
gridSeries.dataSource = this.worldGridlines;
symbolSeries.dataSource = this.worldAirports;

API リファレンス

IgcGeographicPolylineSeriesComponent
IgcGeographicSymbolSeriesComponent

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