React 複数データソースのバインド

Ignite UI for React マップでは、カスタムデータソースを地理空間データとオーバーレイするために複数の地理的シリーズオブジェクトを追加できます。たとえば、空港の地理的位置をプロットするための IgrGeographicSymbolSeries、空港間のフライトをプロットするための IgrGeographicPolylineSeries、主要な地理座標のグリッド線をプロットするための別の IgrGeographicPolylineSeries などです。

React 複数データソースのバインドの例

このトピックでは、以下の地理空間データをプロットする複数の地理的シリーズを表示するための手順を説明します。

IgrGeographicSymbolSeries – 主要空港の場所を表示します。
IgrGeographicPolylineSeries – 空港間のフライトを表示します。
IgrGeographicPolylineSeries – 主座標のグリッド線を表示します。

目的のデータをプロットするために、地理的シリーズをこの組み合わせまたは他の組み合わせでも使用できます。

データソースの作成

Ignite UI for React マップに表示するすべての地理的シリーズのデータソースを作成します。たとえば、WorldConnections スクリプトを使用できます。

import WorldConnections from "./WorldConnections";
// ..

public onMapReferenced(map: IgrGeographicMap) {
    this.geoMap = map;

    const worldFlights: any[] = WorldConnections.getFlights();
    const worldAirports: any[] = WorldConnections.getAirports();
    const worldGridlines: any[] = WorldConnections.getGridlines();

    // create and overlay geographic series here
}

フライトのオーバーレイ

主要空港間のフライト接続を持つ最初の IgrGeographicPolylineSeries オブジェクトを作成し、Ignite UI for React マップの Series コレクションに追加します。

const lineSeries = new IgrGeographicPolylineSeries ( { name: "lineSeries" });
lineSeries.dataSource = worldFlights;
lineSeries.shapeMemberPath = "points";
lineSeries.shapeStroke = "rgba(196, 14, 14,0.05)";
lineSeries.shapeStrokeThickness = 4;
this.geoMap.series.add(lineSeries);

グリッド線のオーバーレイ

地理グリッド線を使用して2番目の IgrGeographicPolylineSeries オブジェクトを作成し、それを XamGeographicMap の Series コレクションに追加します。

const gridSeries = new IgrGeographicPolylineSeries( { name: "gridSeries" });
gridSeries.dataSource = worldGridlines;
gridSeries.shapeMemberPath = "points";
gridSeries.shapeStroke = "Gray";
gridSeries.shapeStrokeThickness = 1;
this.geoMap.series.add(gridSeries);

空港のオーバーレイ

空港ポイントを使用して IgrGeographicSymbolSeries オブジェクトを作成し、それを Ignite UI for React 地理マップの Series コレクションに追加します。

const symbolSeries = new IgrGeographicSymbolSeries ( { name: "symbolSeries" });
symbolSeries.dataSource = worldAirports;
symbolSeries.markerType = MarkerType.Circle;
symbolSeries.latitudeMemberPath = "lat";
symbolSeries.longitudeMemberPath = "lon";
symbolSeries.markerBrush = "#aad3df";
symbolSeries.markerOutline = "rgb(73, 73, 73)";
this.geoMap.series.add(symbolSeries);

まとめ

上記すべてのコードスニペットを以下のコードブロックにまとめて、プロジェクトに簡単にコピーできます。

React 複数データ ソースのバインド