React ヒート画像の表示

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

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

React ヒート画像の表示の例

IgrShapeDataSource がそのシェイプ ファイルを読み込むと、そのデータを IgrShapefileRecord オブジェクトに変換します。これらのオブジェクトは、IgrShapeDataSource の 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 { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicTileSeries, IgrTileGeneratorMapImagery } from 'igniteui-react-maps';
import { IgrHeatTileGenerator, IgrShapeDataSource } from 'igniteui-react-core';
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
// ...
const mods: any[] = [
    IgrGeographicMapModule,
    IgrDataChartInteractivityModule
];
mods.forEach((m) => m.register());

ヒートマップの作成

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

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

import { IgrGeographicTileSeries, IgrTileGeneratorMapImagery } from 'igniteui-react-maps';
import { IgrHeatTileGenerator, IgrShapeDataSource } from 'igniteui-react-core';
private map: IgrGeographicMap
private mapRef(r: IgrGeographicMap) {
    this.map = r;
    this.setState({});
}
// ...
var map = this.map;
map.zoomToGeographic({ left: -134.5, top: 16.0, width: 70.0, height: 37.0 });

var root = "https://static.infragistics.com/xplatform/shapes/";

var sds = new IgrShapeDataSource();
sds.importCompleted = () => {
    var latitudes: number[] = [];
    var longitudes: number[] = [];
    var populations: number[] = [];
    // parsing shapefile data and creating geographic locations
    var pointData = sds.getPointData();
    for (var i = 0; i < pointData.length; i++) {
        var record = pointData[i];
        for (var j = 0; j < record.points.length; j++) {
            var pointsList = record.points[j];
            for (var k = 0; k < pointsList.length; k++) {
                latitudes.push(pointsList[k].y);
                longitudes.push(pointsList[k].x);
            }
        }
        // using field/column names from .DBF file
        var value = record.fieldValues["POP_2010"];
        populations.push(value >= 0 ? value : 0);
    }

    // the heat map's tiles are generated from the three parallel arrays: where each
    // reading is, and how large it is
    // generating heat map imagery tiles
    var gen = new IgrHeatTileGenerator();
    gen.xValues = longitudes;
    gen.yValues = latitudes;
    gen.values = populations;
    gen.blurRadius = 6;
    gen.maxBlurRadius = 20;
    gen.useBlurRadiusAdjustedForZoom = true;
    gen.minimumColor = "rgba(100, 255, 0, 0.5)";
    gen.maximumColor = "rgba(255, 255, 0, 0.5)";
    gen.useGlobalMinMax = true;
    gen.useGlobalMinMaxAdjustedForZoom = true;
    gen.useLogarithmicScale = true;
    gen.scaleColors = [
        "rgba(0, 0, 255, .251)",
        "rgba(0, 255, 255, .3765)",
        "rgba(50, 205, 50, .2675)",
        "rgba(255, 255, 0, .7059)",
        "rgba(255, 0, 0, .7843)"
    ];
    // Generating the tiles on a worker keeps them off the thread the map draws on, which
    // is worth doing for a heat map of any size. Wiring one up is not the same on every
    // bundler, so the topic shows it separately — and workers are turned off here to
    // match, since the generator asks for one by default and throws when neither a script
    // path nor an instance was given.
    gen.useWebWorkers = false;

    var tileImagery = new IgrTileGeneratorMapImagery();
    tileImagery.tileGenerator = gen;

    // generating heat map series
    var series = new IgrGeographicTileSeries({ name: "geographicTileSeries1" });
    series.tileImagery = tileImagery;
    // adding the heat map series to the map
    map.series.add(series);
};
sds.shapefileSource = root + "AmericanCities.shp";
sds.databaseSource = root + "AmericanCities.dbf";
sds.dataBind();

API リファレンス