Blazor マップの概要

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

Blazor マップの例

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

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

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

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

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

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

Microsoft Bing ブログ

モジュールの要件

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

// in Program.cs file

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

使用方法

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

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

その他のリソース

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

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

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

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

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

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

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

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

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

API リファレンス