Angular マップの概要

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

Angular マップの例

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

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

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

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-angular-core
npm install --save igniteui-angular-charts
npm install --save igniteui-angular-maps

モジュールの要件

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

import { IgxGeographicMapModule } from 'igniteui-angular-maps';
import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
// ...
// app.module.ts
@NgModule({
    imports: [
    IgxGeographicMapModule,
    IgxDataChartInteractivityModule
    ]
})
export class AppModule { }

使用方法

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

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

その他のリソース

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

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

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

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

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

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

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

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

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

API リファレンス