Blazor マップの概要

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

Blazor マップの例

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

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

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

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

NOTE: As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028.

For more details please visit:

Microsoft Bing Blogs

モジュールの要件

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
  typeof(IgbGeographicMapModule),
  typeof(IgbDataChartInteractivityModule)
);

使用方法

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

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true" />

その他のリソース

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

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

API リファレンス

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