Web Components マップの概要

    Ignite UI for Web Components Map コンポーネントを使用すると、ビューモデルからの地理的位置を含むデータ、またはシェープ ファイルからロードされた地理空間データを地理的画像マップに表示できます。

    Web Components マップの例

    以下のサンプルは、Bubble Series (バブル シリーズ) とも呼ばれる IgcGeographicProportionalSymbolSeriesComponent を使用して IgcGeographicMapComponent にデータを表示する方法を示しています。

    EXAMPLE
    DATA
    TS
    HTML
    CSS

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

    Web Components 地図コンポーネントを使用すると、Bing Maps™ および Open Street Maps から地理的画像をレンダリングできます。マップは何万ものデータポイントをプロットし、コントロールがリアルタイム フィードを処理できるように数ミリ秒ごとにそれらを更新します。

    マップの Series プロパティは、無制限の地理的シリーズのレンダリングをサポートするために使用されます。このプロパティは、地理的シリーズ オブジェクトのコレクションで、任意のタイプの地理的シリーズをそれに追加できます。たとえば、都市などの地理的位置をプロットするために IgcGeographicSymbolSeriesComponent、またこれらの地理的位置の間の接続 (道路など) をプロットするために IgcGeographicPolylineSeriesComponent を追加できます。

    Map は、マウス、キーボード、またはコードビハインドを使用して、マップ コンテンツをナビゲーションするためのカスタマイズ可能なナビゲーション動作を提供します。

    依存関係

    地理マップコンポーネントを使用するには、はじめにこれらのパッケージをインストールする必要があります。

    npm install --save igniteui-webcomponents-core
    npm install --save igniteui-webcomponents-charts
    npm install --save igniteui-webcomponents-maps
    cmd

    モジュールの要件

    IgcGeographicMapComponent には以下のモジュールが必要ですが、DataChartInteractivityModule は、マップ コンテンツのパンやズームなどのマウス操作にのみ必要です。

    import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
    import { IgcGeographicMap } from 'igniteui-webcomponents-maps';
    import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
    
    IgcGeographicMapModule.register();
    IgcDataChartInteractivityModule.register();
    ts
    import { ModuleManager } from 'igniteui-webcomponents-core';
    import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
    import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
    
    ModuleManager.register(
        IgcDataChartInteractivityModule,
        IgcGeographicMapModule
    );
    ts
    Ignite UI for Web Components | CTA Banner

    使用方法

    マップ モジュールがインポートされたので、以下のステップは地理的地図を作成することです。以下のコードは、これを実行して地図内でズームを有効にする方法を示しています。

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

    その他のリソース

    関連する Web Components マップ機能の詳細については、以下のトピックを参照してください。

    API リファレンス

    以下は上記のセクションで説明した API メンバーのリストです。