React Displaying Heat Imagery
O controle de mapa Ignite UI for React tem a capacidade de mostrar imagens de mapa de calor por meio do uso do ShapeFileRecord que são gerados por um IgrShapeDataSource carregando dados geoespaciais carregando arquivos de forma em uma série de blocos.
É altamente recomendável que você examine o tópico Associando arquivos de forma com dados geoespaciais como um pré-requisito para este tópico.
React Displaying Heat Imagery Example
Quando a IgrShapeDataSource carrega seus arquivos de forma, ele converte esses dados em IgrShapefileRecord objetos. Esses objetos podem ser recuperados do GetPointData() método do IgrShapeDataSource e podem ser usados para criar um mapa de calor por meio do uso de um IgrTileGeneratorMapImagery objeto com um IgrHeatTileGenerator atribuído à sua TileGenerator propriedade. Isso IgrTileGeneratorMapImagery pode então ser usado em a IgrGeographicTileSeries como sua tileImagery fonte.
O IgrHeatTileGenerator objeto funciona de forma que tenha três caminhos de valor, xValues, yValues e values. Como exemplo de como eles podem ser usados, no caso de um arquivo de forma que contém informações sobre a população, você pode considerar a longitude yValues, a xValues latitude e values os dados da população. Cada uma dessas propriedades leva um number[].
A exibição da série de blocos geográficos ao usar a funcionalidade de mapa de calor pode ser personalizada definindo as minimumColor propriedades e maximumColor como cadeias de caracteres "rgba" que descrevem as cores que você deseja que correspondam aos valores mínimo e máximo da coleção que você atribui à values propriedade do HeatTileGenerator. Você pode personalizar isso ainda mais definindo a ScaleColors propriedade do gerador para conter uma coleção de cadeias de caracteres que descrevem cores, pois isso informará quais IgrHeatTileGenerator cores usar para os valores exibidos no mapa. Também é possível personalizar como as cores em sua ScaleColors coleção se desfocam usando as blurRadius propriedades , maxBlurRadius, e useBlurRadiusAdjustedForZoom.
Eles IgrHeatTileGenerator também podem usar uma escala logarítmica. Se você quiser usar isso, poderá definir a useLogarithmicScale propriedade como true.
Web Worker
O IgrHeatTileGenerator também tem suporte para web workers para fazer o trabalho pesado do carregamento das imagens de bloco do arquivo de forma em um thread separado. Isso pode melhorar muito o desempenho do seu mapa geográfico ao usar a funcionalidade de mapa de calor. Para usar um web worker com o gerador, você pode definir a useWebWorkers propriedade como true e, em seguida, definir a webWorkerInstance propriedade como uma instância do seu 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);
Dependencies
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();
Creating Heatmap
O snippet de código a seguir mostra como exibir um mapa de calor baseado em população no componente de mapa 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>