React マップの概要
Ignite UI for React Map コンポーネントを使用すると、ビューモデルからの地理的位置を含むデータ、またはシェープ ファイルからロードされた地理空間データを地理的画像マップに表示できます。
React マップの例
以下のサンプルは、Bubble Series (バブル シリーズ) とも呼ばれる IgrGeographicProportionalSymbolSeries
を使用して IgrGeographicMap
にデータを表示する方法を示しています。
React 地図コンポーネントを使用すると、Bing Maps™ および Open Street Maps から地理的画像をレンダリングできます。マップは何万ものデータポイントをプロットし、コントロールがリアルタイム フィードを処理できるように数ミリ秒ごとにそれらを更新します。
マップの Series プロパティは、無制限の地理的シリーズのレンダリングをサポートするために使用されます。このプロパティは、地理的シリーズ オブジェクトのコレクションで、任意のタイプの地理的シリーズをそれに追加できます。たとえば、都市などの地理的位置をプロットするために IgrGeographicSymbolSeries
、またこれらの地理的位置の間の接続 (道路など) をプロットするために IgrGeographicPolylineSeries
を追加できます。
Map は、マウス、キーボード、またはコードビハインドを使用して、マップ コンテンツをナビゲーションするためのカスタマイズ可能なナビゲーション動作を提供します。
依存関係
地理マップコンポーネントを使用するには、はじめにこれらのパッケージをインストールする必要があります。
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 メンバーのリストです。