React 地理等高線マップ

React マップ コンポーネントでは、IgrGeographicContourLineSeries を使用して、各点に数値が割り当てられた経度および緯度データの三角測量に基づいて、地理的なコンテキストで色付きの等高線を描画できます。このタイプの地理的シリーズは、天気の気温、気圧、降水量、人口分布、地形データなどの地理的位置によって定義される散在データをレンダリングするのに役立ちます。

React 地理等高線マップの例

IgrGeographicContourLineSeries は IgrGeographicScatterAreaSeries とよく似ていますが、塗りつぶしスケールを使用して色付けされた等高線としてデータを表し、地理散布エリア シリーズはカラースケールを使用して補間された面としてデータを表します。

データ要件

マップコンポーネントの他の種類の地理的シリーズと同様に、IgrGeographicContourLineSeries には、オブジェクトの配列にバインドできる ItemsSource プロパティがあります。さらに、項目ソースの各項目にはデータ列が 3 つあり、2 つは地理的位置 (経度および緯度座標) を保管し、1 つのデータ列は地理的位置に関連した値を保管します。これらのデータ列は、地理的シリーズの longitudeMemberPath、latitudeMemberPath および valueMemberPath プロパティによって識別されます。 IgrGeographicContourLineSeries は、三角測量が trianglesSource プロパティに設定されていない場合、ItemsSource の項目で定義済みのデータ三角測量を自動的に実行します。ただし、三角測量の計算は非常に時間のかかるプロセスであるため、このプロパティのために TriangulationSource を指定すると、ランタイム パフォーマンスがよくなります。特にデータ項目が多数ある場合には顕著です。

データ バインディング

以下の表は、データ バインドに使用される IgrGeographicContourLineSeries プロパティの概要です。

プロパティ名	プロパティ型	概要
ItemsSource	任意	trianglesSource プロパティが三角測量データを提供しない場合に三角測量を実行するデータ項目のソースです。
longitudeMemberPath	文字列	ItemsSource にバインドされているすべての項目の経度を含むプロパティの名前。
latitudeMemberPath	文字列	ItemsSource にバインドされているすべての項目の Latitude を含むプロパティの名前。
valueMemberPath	文字列	各データ項目の緯度および経度座標の値を含むプロパティの名前。fillScale プロパティが設定されている場合、この数値は色に変換されます。
trianglesSource	任意	三角測量データのソースを取得または設定します。TriangulationSource オブジェクトの Triangles をこのプロパティに設定すると、ランタイムパフォーマンスと地理的シリーズレンダリングの両方が向上します。
triangleVertexMemberPath1	文字列	各三角形に対して ItemsSource の最初の頂点のインデックスを含む、TrianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。
triangleVertexMemberPath2	文字列	各三角形に対して ItemsSource の最初の頂点のインデックスを含む、TrianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。
triangleVertexMemberPath3	文字列	各三角形に対して ItemsSource の最初の頂点のインデックスを含む、TrianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。

等高線の塗りつぶしスケール

IgrGeographicContourLineSeries の fillScale を使用して地理的シリーズの等高線の塗りブラシを解決します。 ValueBrushScale クラスは、ユーザーの色分けのニーズもほとんどを満たすはずですが、カスタムの色分けロジックのアプリケーションで ValueBrushScale クラスを継承できます。 以下の表は、GeographicContourLineSeries のサーフェス カラーリングに影響を与える CustomPaletteColorScale のプロパティの一覧です。

プロパティ名	プロパティ型	概要
brushes	BrushCollection	IgrGeographicContourLineSeries の輪郭を塗りつぶすためのブラシのコレクションを取得または設定します。
maximumValue	double	塗りつぶしスケールでブラシを割り当てるための最高値。
minimumValue	double	塗りつぶしスケールでブラシを割り当てるための最低値。

コード スニペット

以下のコードは、IgrGeographicContourLineSeries を世界の表面温度を表す三角測量データにバインドする方法を示しています。

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicContourLineSeries } from 'igniteui-react-maps';
import { IgrValueBrushScale } from 'igniteui-react-charts';
import { IgrCustomPaletteColorScale } from 'igniteui-react-charts';
import { IgrShapeDataSource } from 'igniteui-react-core';

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

public render() {
    return (
    <IgrGeographicMap
        ref={this.onMapReferenced}
        width="600px"
        height="600px"
        zoomable="true" />
    );
}

public onMapReferenced(map: IgrGeographicMap) {
    this.geoMap = map;
    this.geoMap.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
    const sds = new IgrShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = "/Shapes/WorldTemperatures.shp";
    sds.databaseSource  = "/Shapes/WorldTemperatures.dbf";
    sds.dataBind();
}

public onDataLoaded(sds: IgrShapeDataSource, e: any) {
    const contourPoints: any[] = [];
    for (const record of sds.getPointData()) {
        const temp = record.fieldValues.Contour;
        if (temp % 10 === 0 && temp >= 0) {
            for (const shapes of record.points) {
                 for (let i = 0; i < shapes.length; i++) {
                    if (i % 5 === 0) {
                        const p = shapes[i];
                        const item = { lon: p.x, lat: p.y, value: temp};
                        contourPoints.push(item);
                    }
                 }
            }
        }
    }

    this.createContourSeries(contourPoints);
}

public createContourSeries(data: any[])
{
    const brushes = [
        "rgba(32, 146, 252, 0.5)",
        "rgba(14, 194, 14, 0.5)",
        "rgba(252, 120, 32, 0.5)",
        "rgba(252, 32, 32, 0.5)",
    ];

    const brushScale = new IgrValueBrushScale({});
    brushScale.brushes = brushes;
    brushScale.minimumValue = 0;
    brushScale.maximumValue = 30;

    const contourSeries = new IgrGeographicContourLineSeries( { name: "contourSeries" });
    contourSeries.dataSource = data;
    contourSeries.longitudeMemberPath = "lon";
    contourSeries.latitudeMemberPath = "lat";
    contourSeries.valueMemberPath = "value";
    contourSeries.fillScale = brushScale;
    contourSeries.thickness = 4;

    this.geoMap.series.add(contourSeries);
}

API リファレンス

• fillScale
• IgrGeographicContourLineSeries
• IgrGeographicScatterAreaSeries
• ItemsSource
• latitudeMemberPath
• longitudeMemberPath
• trianglesSource
• TriangulationSource
• IgrValueBrushScale
• valueMemberPath