Angular Displaying Heat Imagery

O controle de mapa Ignite UI for Angular tem a capacidade de mostrar imagens de mapa de calor por meio do uso do ShapeFileRecord que são gerados por um IgxShapeDataSource 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.

Angular Displaying Heat Imagery Example

Quando a IgxShapeDataSource carrega seus arquivos de forma, ele converte esses dados em IgxShapefileRecord objetos. Esses objetos podem ser recuperados do GetPointData() método do IgxShapeDataSource e podem ser usados para criar um mapa de calor por meio do uso de um IgxTileGeneratorMapImagery objeto com um IgxHeatTileGenerator atribuído à sua TileGenerator propriedade. Isso IgxTileGeneratorMapImagery pode então ser usado em a IgxGeographicTileSeriesComponent como sua tileImagery fonte.

O IgxHeatTileGenerator 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 IgxHeatTileGenerator 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 IgxHeatTileGenerator também podem usar uma escala logarítmica. Se você quiser usar isso, poderá definir a useLogarithmicScale propriedade como true.

Web Worker

O IgxHeatTileGenerator 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-angular-core';

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

Dependencies

import { IgxHeatTileGenerator } from 'igniteui-angular-core';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';

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 Angular:

<igx-geographic-map #map width="100%" height="calc(100% - 60px)">
    <igx-geographic-tile-series name="heatTiles" [tileImagery]="tileImagery"></igx-geographic-tile-series>
</igx-geographic-map>

@ViewChild("map", { static: true })
public map: IgxGeographicMapComponent;
public data: any[];
public tileImagery: IgxTileGeneratorMapImagery;
// ...
constructor() {
    this.data = this.initData();

    this.tileImagery = new IgxTileGeneratorMapImagery();

    const con: IgxShapeDataSource = new IgxShapeDataSource();
    con.importCompleted.subscribe((s, e) => {
        const data = con.getPointData();
        const lat: number[] = [];
        const lon: number[] = [];
        const val: number[] = [];
        for (let i = 0; i < data.length; i++) {
            const item = data[i];
            for (let j = 0; j < item.points.length; j++) {
                const pointsList = item.points[j];
                for (let k = 0; k < pointsList.length; k++) {
                    lat.push(pointsList[k].y);
                    lon.push(pointsList[k].x);
                }
            }
            const value = item.fieldValues["POP_2010"];
            if (value >= 0) {
                val.push(value);
            } else {
                val.push(0);
            }
        }

        const gen = new IgxHeatTileGenerator();
        gen.xValues = lon;
        gen.yValues = lat;
        gen.values = val;
        gen.blurRadius = 6;
        gen.maxBlurRadius = 20;
        gen.useBlurRadiusAdjustedForZoom = true;
        gen.minimumColor = "rgba(100,255, 0, 0.3922)";
        gen.maximumColor = "rgba(255, 255, 0, 0.9412)";
        gen.useGlobalMinMax = true;
        gen.useGlobalMinMaxAdjustedForZoom = true;
        gen.useLogarithmicScale = true;
        gen.useWebWorkers = true;
        gen.webWorkerInstance = new Worker("../heatworker.worker", { type: "module" });
        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)"
        ];

        this.tileImagery.tileGenerator = gen;
    });
    con.shapefileSource = "assets/Shapes/AmericanCities.shp";
    con.databaseSource  = "assets/Shapes/AmericanCities.dbf";
    con.dataBind();
}

Angular Displaying Heat Imagery