Angular Displaying Heat Imagery
El control de mapa Ignite UI for Angular tiene la capacidad de mostrar imágenes de mapa de calor mediante el uso de la ShapeFileRecord
función que se generan mediante IgxShapeDataSource
la carga de datos geoespaciales mediante la carga de archivos de formas en una serie de teselas.
Se recomienda encarecidamente que revise el tema Vincular archivos de formas con datos geoespaciales como requisito previo para este tema.
Ejemplo de visualización de imágenes de calor Angular
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Cuando un IgxShapeDataSource
carga sus archivos de forma, convierte esos datos en IgxShapefileRecord
Objetos. Estos objetos se pueden recuperar de la carpeta GetPointData()
método de la IgxShapeDataSource
y luego se puede usar para crear un mapa de calor mediante el uso de un IgxTileGeneratorMapImagery
objeto con un objeto IgxHeatTileGenerator
asignado a su TileGenerator
propiedad. Éste IgxTileGeneratorMapImagery
A continuación, se puede utilizar en un IgxGeographicTileSeriesComponent
ya que su tileImagery
fuente.
El objeto IgxHeatTileGenerator
funciona de manera que tiene tres rutas de valores, xValues
, yValues
y values
. Como ejemplo de cómo podrían usarse, en el caso de un archivo de forma que tenga información sobre la población, podría considerar los xValues
como longitud, yValues
como latitud y values
como datos de población. Cada una de estas propiedades toma un number[]
.
La visualización de la serie de mosaicos geográficos cuando se utiliza la funcionalidad de mapa de calor se puede personalizar configurando las propiedades minimumColor
y maximumColor
en cadenas "rgba" que describen los colores que desea que correspondan a los valores mínimo y máximo de la colección que asigna. la propiedad values
de HeatTileGenerator.
Puede personalizar aún más esto configurando la propiedad ScaleColors
del generador para que contenga una colección de cadenas que describan colores, ya que esto le indicará a IgxHeatTileGenerator
qué colores usar para los valores mostrados en el mapa. También es posible personalizar cómo se difuminan los colores de su colección ScaleColors
utilizando las propiedades blurRadius
, maxBlurRadius
y useBlurRadiusAdjustedForZoom
.
El IgxHeatTileGenerator
también puede utilizar una escala logarítmica. Si desea utilizar esto, puede establecer la propiedad useLogarithmicScale
en verdadero.
trabajador web
IgxHeatTileGenerator
también admite que los trabajadores web realicen el trabajo pesado de cargar las imágenes de mosaicos desde su archivo de formas en un hilo separado. Esto puede mejorar enormemente el rendimiento de su mapa geográfico cuando utiliza la funcionalidad de mapa de calor. Para utilizar un trabajador web con el generador, puede establecer la propiedad useWebWorkers
en verdadero y luego establecer la propiedad webWorkerInstance
en una instancia de su trabajador web.
// 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);
ts
dependencias
import { IgxHeatTileGenerator } from 'igniteui-angular-core';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';
ts
Creando mapa de calor
El siguiente fragmento de código muestra cómo mostrar un mapa de calor basado en la población en el 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>
html
@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();
}
ts
Referencias de API
IgxGeographicTileSeriesComponent
IgxHeatTileGenerator
maximumColor
minimumColor
IgxShapefileRecord
IgxShapeDataSource
IgxTileGeneratorMapImagery
tileGenerator
tileImagery
useBlurRadiusAdjustedForZoom
useLogarithmicScale