Web Components Exibindo imagens de calor
O controle de mapa Ignite UI for Web Components tem a capacidade de mostrar imagens de mapa de calor por meio do uso do ShapeFileRecord que são gerados por um IgcShapeDataSource 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.
Web Components Displaying Heat Imagery Example
Quando a IgcShapeDataSource carrega seus arquivos de forma, ele converte esses dados em IgcShapefileRecord objetos. Esses objetos podem ser recuperados do GetPointData() método do IgcShapeDataSource e podem ser usados para criar um mapa de calor por meio do uso de um IgcTileGeneratorMapImagery objeto com um IgcHeatTileGenerator atribuído à sua TileGenerator propriedade. Isso IgcTileGeneratorMapImagery pode então ser usado em a IgcGeographicTileSeriesComponent como sua tileImagery fonte.
O IgcHeatTileGenerator 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 IgcHeatTileGenerator 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 IgcHeatTileGenerator também podem usar uma escala logarítmica. Se você quiser usar isso, poderá definir a useLogarithmicScale propriedade como true.
Web Worker
O IgcHeatTileGenerator 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-webcomponents-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 { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicTileSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcHeatTileGenerator } from 'igniteui-webcomponents-core';
import { IgcTileGeneratorMapImagery } from 'igniteui-webcomponents-maps';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
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 Web Components:
private geoMap: IgcGeographicMapComponent;
public tileImagery: IgcTileGeneratorMapImagery;
constructor() {
super();
this.tileImagery = new IgcTileGeneratorMapImagery();
this.onDataLoaded = this.onDataLoaded.bind(this);
}
connectedCallback() {
this.innerHTML = templateHTML;
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.geoMap.zoomToGeographic({ left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
const url = AssetsUtils.getAssetsPath() + "/data/UsaCitiesPopulation.csv";
console.log("SB loading " + url);
fetch(url)
.then((response) => response.text())
.then(data => this.onDataLoaded(data));
}
public onDataLoaded(csvData: string) {
const csvLines = csvData.split("\n");
console.log("loaded UsaCitiesPopulation.csv " + csvLines.length);
const latitudes: number[] = [];
const longitudes: number[] = [];
const populations: number[] = [];
// parsing CSV data and creating geographic locations
for (let i = 1; i < csvLines.length; i++) {
const columns = csvLines[i].split(",");
latitudes.push(Number(columns[1]));
longitudes.push(Number(columns[2]));
populations.push(Number(columns[3]));
}
// generating heat map imagery tiles
const gen = new IgcHeatTileGenerator();
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.useWebWorkers = true;
gen.webWorkerInstance = new Worker();
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)"
];
this.tileImagery.tileGenerator = gen;
// generating heat map series
const series = new IgcGeographicTileSeriesComponent();
series.tileImagery = this.tileImagery;
// add heat map series to the map
this.geoMap.series.add(series);
}