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

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

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

    EXAMPLE
    WorldConnections.ts
    WorldLocations.ts
    WorldUtils.ts
    TS
    HTML
    CSS

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

    データ ソースの作成

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

    Ignite UI for Web Components | CTA Banner

    フライトのオーバーレイ

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

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

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

    空港のオーバーレイ

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

    まとめ

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

    API リファレンス