React Displaying Heat Imagery

The Ignite UI for React map control has the ability to show heat-map imagery through the use of the ShapeFileRecord that are generated by a IgrShapeDataSource by loading geo-spatial data by loading shape files to a tile series.

É 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 umIgrShapeDataSource carrega seus arquivos de formas, ele converte esses dados emIgrShapefileRecord objetos. Esses objetos podem ser recuperados peloGetPointData() método doIgrShapeDataSource e podem então ser usados para criar um mapa de calor por meio do uso de umIgrTileGeneratorMapImagery objeto com umIgrHeatTileGenerator atribuído à suaTileGenerator propriedade. IssoIgrTileGeneratorMapImagery pode então ser usado em aIgrGeographicTileSeries como suatileImagery fonte.

OIgrHeatTileGenerator objeto funciona de modo que possui três caminhos de valor,xValues,yValues evalues. Como exemplo de como esses dados podem ser usados, no caso de um arquivo de formas que contém informações sobre a população, você pode considerar que éxValues longitude,yValues latitude evalues dados populacionais. Cada uma dessas propriedades possui umnumber[].

A exibição da série de blocos geográficos ao usar a funcionalidade de mapa de calor pode ser personalizada definindo asminimumColor propriedades emaximumColor para cadeias "rgba" que descrevem cores que você deseja que correspondam aos valores mínimos e máximos da coleção que você atribui àvalues propriedade doHeatTileGenerator.. Você pode personalizar ainda mais isso definindoScaleColors a propriedade do gerador para conter uma coleção de strings que descrevem cores, pois isso vai indicarIgrHeatTileGenerator quais cores usar para os valores exibidos no mapa. Também é possível personalizar como as cores da suaScaleColors coleção se desfocam usando asblurRadius propriedades emaxBlurRadiususeBlurRadiusAdjustedForZoom.

ElesIgrHeatTileGenerator também podem usar uma escala logarítmica. Se quiser usar isso, pode definir auseLogarithmicScale propriedade como verdadeira.

Web Worker

TambémIgrHeatTileGenerator há suporte para web workers fazerem o trabalho pesado de carregar as imagens do tile a partir do seu arquivo de formas 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 auseWebWorkers propriedade como true e depois definir awebWorkerInstance propriedade como uma instância do seu web worker (web worker em um servidor).

// 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>

React Displaying Heat Imagery