React ヒート画像の表示
Ignite UI for React マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、IgrShapeDataSource によって生成される ShapeFileRecord を使用して、ヒートマップ画像を表示する機能があります。
このトピックを読み進めるための前提条件として、シェープ ファイルを地理的データにバインディングをお読みください。
React ヒート画像の表示の例
IgrShapeDataSource がそのシェイプ ファイルを読み込むと、そのデータを IgrShapefileRecord オブジェクトに変換します。これらのオブジェクトは、IgrShapeDataSource の GetPointData() メソッドから取得でき、TileGenerator プロパティに割り当てられた 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>