React 地理的データ モデルのバインディング

    Ignite UI for React マップ コンポーネントは、シェイプ ファイルからの地理空間データやデータ モデルからの地理的位置を地理的画像マップに表示するように設計されています。地理的シリーズの ItemsSource プロパティは、データ モデルへのバインディングのために使用されます。このプロパティは、カスタム オブジェクトの配列にバインドできます。

    React 地理的データ モデルのバインディングの例

    EXAMPLE
    DATA
    TSX
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    以下の表で、地理的シリーズのタイプごとに必要となるデータ構造を簡単に説明します。

    Geographic シリーズ プロパティ 概要
    IgrGeographicSymbolSeries longitudeMemberPath、latitudeMemberPath 2 つの数値の経度と緯度座標の名前を指定します。
    IgrGeographicHighDensityScatterSeries longitudeMemberPath、latitudeMemberPath 2 つの数値の経度と緯度座標の名前を指定します。
    IgrGeographicProportionalSymbolSeries longitudeMemberPath、latitudeMemberPath、radiusMemberPath 2 つの経度座標と緯度座標の名前と、シンボルのサイズ/半径の数字列を 1 列指定します。
    IgrGeographicScatterAreaSeries longitudeMemberPath、latitudeMemberPath、colorMemberPath 数値の三角測量のために、2 つの経度と緯度座標および数値列を 1 列指定します。
    IgrGeographicContourLineSeries longitudeMemberPath、latitudeMemberPath、valueMemberPath 数値の三角測量のために、2 つの経度と緯度座標および数値列を 1 列指定します。
    IgrGeographicShapeSeries shapeMemberPath 図形の地理的ポイントを含む ItemsSource 項目のデータ列の名前を指定します。このプロパティは、x プロパティと y プロパティを持つオブジェクトの配列の配列にマップする必要があります。
    IgrGeographicPolylineSeries shapeMemberPath 線の地理的座標を含む ItemsSource 項目のデータ列の名前を指定します。このプロパティは、x プロパティと y プロパティを持つオブジェクトの配列の配列にマップする必要があります。

    コード スニペット

    以下のコードは、IgrGeographicSymbolSeries を、経度と緯度の座標を使用して格納された世界の一部の都市の地理的位置を含むカスタム データ モデルにバインドする方法を示します。また、WorldUtility を使用してこれらの場所間の最短の地理的経路をプロットするために IgrGeographicPolylineSeries を使用します。

    import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
import WorldUtils from "./WorldUtils" ;
// ...

constructor(props: any) {
    super(props);

    const cityDAL = { lat:  32.763, lon: -96.663, country: "US", name: "Dallas" };
    const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name:"Auckland" };
    const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name:"Santiago" };
    const cityJAP = { lat:  35.683, lon: 139.809, country: "Japan", name: "Tokyo" }
    const citySNG = { lat:  1.229, lon: 104.177,  country: "Singapore", name:"Singapore" };
    const cityMOS = { lat: 55.750, lon:  37.700,  country: "Russia", name: "Moscow"};

    this.flights = [
        { origin: cityDAL, dest: citySNG, color: "Green" },
        { origin: cityMOS, dest: cityNZL, color: "Red" },
        { origin: cityCHL, dest: cityJAP, color: "Blue" },
    ];

    for (const flight of this.flights) {
        this.createPolylineSeries(flight);
        this.createSymbolSeries(flight);
    }
}

public createSymbolSeries(flight: any)
{
    const geoLocations = [flight.origin, flight.dest ];
    const symbolSeries = new IgrGeographicSymbolSeries ( { name: "symbolSeries" });
    symbolSeries.dataSource = geoLocations;
    symbolSeries.markerType = MarkerType.Circle;
    symbolSeries.latitudeMemberPath = "lat";
    symbolSeries.longitudeMemberPath = "lon";
    symbolSeries.markerBrush  = "White";
    symbolSeries.markerOutline = flight.color;
    symbolSeries.thickness = 1;
    this.geoMap.series.add(symbolSeries);
}

public createPolylineSeries(flight: any)
{
    const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest);
    const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest);
    const geoRoutes = [ { points: geoPath } ];
    const lineSeries = new IgrGeographicPolylineSeries ( { name: "lineSeries" });
    lineSeries.dataSource = geoRoutes;
    lineSeries.shapeMemberPath = "points";
    lineSeries.shapeStrokeThickness = 9;
    lineSeries.shapeOpacity = 0.5;
    lineSeries.shapeStroke = flight.color;
    this.geoMap.series.add(lineSeries);
}
ts
    Ignite UI for React | CTA Banner

    API リファレンス