React ヒート画像の表示

Ignite UI for React マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、IgrShapefileRecord によって生成される ShapeFileRecord を使用して、ヒートマップ画像を表示する機能があります。

このトピックを読み進めるための前提条件として、シェープ ファイルを地理的データにバインディングをお読みください。

React ヒート画像の表示の例

IgrShapefileRecord がそのシェイプ ファイルを読み込むと、そのデータを IgrShapefileRecord オブジェクトに変換します。これらのオブジェクトは、IgrShapefileRecord の GetPointData() メソッドから取得でき、

プロパティに割り当てられた IgrHeatTileGenerator で IgrTileGeneratorMapImagery オブジェクトを使用してヒートマップを作成するために使用できます。この IgrTileGeneratorMapImagery は、TileImagery ソースとして IgrGeographicTileSeries で使用できます。

IgrHeatTileGenerator オブジェクトは、XValues、YValues、Values の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、XValues を経度、YValues を緯度、Values を人口データとみなすことができます。これらの各プロパティは、number[] を取得します。

ヒートマップ機能を使用する際の地理的タイルシリーズの表示は、MinimumColor プロパティと MaximumColor プロパティを IgrHeatTileGenerator の Values プロパティに割り当てるコレクションの最小値と最大値に対応する色を記述する「rgba」文字列に設定することでカスタマイズできます。これをさらにカスタマイズするには、ジェネレーターの ScaleColors プロパティを設定して、色を説明する文字列のコレクションを含めます。これにより、IgrHeatTileGenerator に、マップに表示される値に使用する色がわかります。BlurRadius、MaxBlurRadius、UseBlurRadiusAdjustedForZoom プロパティを使用して、ScaleColors コレクション内の色が一緒にぼやける方法をカスタマイズすることもできます。

IgrHeatTileGenerator は対数スケールも使用できます。これを使用する場合は、UseLogarithmicScale プロパティを true に設定できます。

Web Worker

また、IgrHeatTileGenerator は、Web Worker が、別のスレッドでシェイプ ファイルからタイル イメージをロードする際の重いリフティングをサポートしています。これにより、ヒートマップ機能を使用する際に地理マップのパフォーマンスが大幅に向上します。ジェネレーターでWebワーカーを使用するには、UseWebWorkers プロパティを true に設定し、WebWorkerInstance プロパティを Web Worker のインスタンスに設定できます。

// heatworker.worker.ts
import { HeatTileGeneratorWebWorker } from 'igniteui-react-core';

let worker: Worker = self as any;
worker.onmessage = HeatTileGeneratorWebWorker.onmessage;
HeatTileGeneratorWebWorker.postmessage = postMessageFunction;
HeatTileGeneratorWebWorker.start();
function postMessageFunction() {
    self.postMessage.apply(self, Array.prototype.slice.call(arguments));
}
export default {} as typeof Worker & (new () => Worker);

import Worker from "./heatworker.worker"

import { IgrGeographicMapImagery } from 'igniteui-react-maps';
import { IgrHeatTileGenerator } from 'igniteui-react-core';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicTileSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { IgrTileGeneratorMapImagery } from 'igniteui-react-maps';
import { IgrShapeDataSource } from 'igniteui-react-core';
// ...
IgrDataChartInteractivityModule.register();
IgrGeographicMapModule.register();

ヒートマップの作成

以下のコード スニペットは、人口ベースのヒートマップを Ignite UI for React マップ コンポーネントに表示する方法を示しています。

public map: IgrGeographicMap;
public tileImagery: IgrTileGeneratorMapImagery = null;
// ...
constructor(props: any) {
    super(props);
    this.onMapReferenced = this.onMapReferenced.bind(this);
    this.onDataLoaded = this.onDataLoaded.bind(this);
    this.tileImagery = new IgrTileGeneratorMapImagery();
    this.state = { tileImagery: null }
}

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

    const url = process.env.PUBLIC_URL;
    const sds: IgrShapeDataSource = new IgrShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = url + "/Shapes/AmericanCities.shp";
    sds.databaseSource  = url + "/Shapes/AmericanCities.dbf";
    sds.dataBind();
}

public onDataLoaded(sds: IgrShapeDataSource, e: any) {
    let records = sds.getPointData();
    let latArray: number[] = [];
    let lonArray: number[] = [];
    let popArray: number[] = [];

    for (let r = 0; r < records.length; r++) {
      let record = records[r];
        for (let j = 0; j < record.points.length; j++) {
            let points = record.points[j];
            for (let k = 0; k < points.length; k++) {
                latArray.push(points[k].y);
                lonArray.push(points[k].x);
            }
        }
        let value = parseInt(record.fieldValues["POP2010"], 10);
        if (value >= 0) {
            popArray.push(value);
        } else {
            popArray.push(0);
      }
    }

    const gen = new IgrHeatTileGenerator();
    gen.xValues = lonArray;
    gen.yValues = latArray;
    gen.values = popArray;
    gen.blurRadius = 6;
    gen.maxBlurRadius = 20;
    gen.useBlurRadiusAdjustedForZoom = true;
    gen.minimumColor = "rgba(100, 255, 0, 0.4)";
    gen.maximumColor = "rgba(255, 255, 0, 0.95)";
    gen.scaleColors = ["rgba(0, 0, 255, 64)", "rgba(0, 255, 255, 96)", "rgba(0, 255, 0, 160)", "rgba(255, 255, 0, 180)", "rgba(255, 0, 0, 200)"];
    gen.useGlobalMinMax = true;
    gen.useGlobalMinMaxAdjustedForZoom = true;
    gen.useLogarithmicScale = true;
    gen.useWebWorkers = true;
    gen.webWorkerInstance = new Worker();

    this.tileImagery.tileGenerator = gen;
    this.setState({ tileImagery: this.tileImagery });
}

<IgrGeographicMap
    ref={this.onMapReferenced}
    height="100%"
    width="100%" >
    <IgrGeographicTileSeries
        name="heatTiles"
        tileImagery={this.state.tileImagery} />
</IgrGeographicMap>

API リファレンス