マップ

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

デモ

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

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

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

依存関係

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

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

必要なモジュール

IgrGeographicMap は、以下のモジュールが必要です。

import { IgrGeographicMapModule } from "igniteui-react-maps/ES5/igr-geographic-map-module";
import { IgrGeographicMap } from "igniteui-react-maps/ES5/igr-geographic-map";
import { IgrDataChartInteractivityModule } from "igniteui-react-charts/ES5/igr-data-chart-interactivity-module";

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

使用方法

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

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