React マップの概要

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

React マップの例

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

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

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

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

依存関係

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

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

モジュールの要件

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

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();

使用方法

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

<IgrGeographicMap
    width="600px"
    height="600px"
    zoomable="true" />

その他のリソース

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

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

API リファレンス

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