Web Components マップの概要

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

Web Components マップの例

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

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

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

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

注: 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。

詳細は以下をご覧ください:

Microsoft Bing ブログ

依存関係

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

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

モジュールの要件

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

import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// ...
ModuleManager.register(
    IgcGeographicMapModule,
    IgcDataChartInteractivityModule
);

使用方法

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

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

その他のリソース

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

• 地理マップのナビゲーション

• 散布図記号シリーズの使用

• 散布図比例シリーズの使用

• 散布等高線シリーズの使用

• 散布図密度シリーズの使用

• 散布エリア シリーズの使用

• シェイプ ポリゴン シリーズの使用

• シェイプ ポリライン シリーズの使用

API リファレンス