Premium

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

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

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

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

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

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

データソースの作成

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

<IgrGeographicMap
    ref={this.geoMapRef}
    height="100%"
    width="100%"
    zoomable={true}>
</IgrGeographicMap>

フライトのオーバーレイ

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

<IgrGeographicPolylineSeries
    name="lineSeries"
    ref={ref => { this.lineSeries = ref; }}
    dataSource={this.worldFlights}
    shapeMemberPath="points"
    shapeStroke="rgba(196, 14, 14, 0.05)"
    shapeStrokeThickness={4} />

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

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

<IgrGeographicPolylineSeries
    name="gridSeries"
    ref={ref => { this.gridSeries = ref; }}
    dataSource={this.worldGridlines}
    shapeMemberPath="points"
    shapeStroke="Gray"
    shapeStrokeThickness={1} />

空港のオーバーレイ

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

<IgrGeographicSymbolSeries
    name="symbolSeries"
    ref={ref => { this.symbolSeries = ref; }}
    dataSource={this.worldAirports}
    latitudeMemberPath="lat"
    longitudeMemberPath="lon"
    markerType="Circle"
    markerBrush="rgba(170, 211, 223, 1)"
    markerOutline="rgba(73, 73, 73, 1)"
    thickness={1} />

まとめ

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

import { IgrGeographicMap, IgrGeographicPolylineSeries, IgrGeographicSymbolSeries } from 'igniteui-react-maps';

<IgrGeographicMap
    ref={this.geoMapRef}
    height="100%"
    width="100%"
    zoomable={true}>
    <IgrGeographicPolylineSeries
        name="lineSeries"
        ref={ref => { this.lineSeries = ref; }}
        dataSource={this.worldFlights}
        shapeMemberPath="points"
        shapeStroke="rgba(196, 14, 14, 0.05)"
        shapeStrokeThickness={4} />
    <IgrGeographicPolylineSeries
        name="gridSeries"
        ref={ref => { this.gridSeries = ref; }}
        dataSource={this.worldGridlines}
        shapeMemberPath="points"
        shapeStroke="Gray"
        shapeStrokeThickness={1} />
    <IgrGeographicSymbolSeries
        name="symbolSeries"
        ref={ref => { this.symbolSeries = ref; }}
        dataSource={this.worldAirports}
        latitudeMemberPath="lat"
        longitudeMemberPath="lon"
        markerType="Circle"
        markerBrush="rgba(170, 211, 223, 1)"
        markerOutline="rgba(73, 73, 73, 1)"
        thickness={1} />
</IgrGeographicMap>

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