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

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

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

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

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

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

データ ソースの作成

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

フライトのオーバーレイ

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

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

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

空港のオーバーレイ

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

まとめ

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

API リファレンス