React Displaying Heat Imagery
El control de mapas Ignite UI for React tiene la capacidad de mostrar imágenes de mapas de calor mediante el uso de ShapeFileRecord
que se generan mediante un IgrShapeDataSource
al cargar datos geoespaciales mediante la carga de archivos de formas en una serie de mosaicos.
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 React
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Cuando un IgrShapeDataSource
carga sus archivos de forma, convierte esos datos en IgrShapefileRecord
Objetos. Estos objetos se pueden recuperar de la carpeta GetPointData()
método de la IgrShapeDataSource
y luego se puede usar para crear un mapa de calor mediante el uso de un IgrTileGeneratorMapImagery
objeto con un objeto IgrHeatTileGenerator
asignado a su TileGenerator
propiedad. Éste IgrTileGeneratorMapImagery
A continuación, se puede utilizar en un IgrGeographicTileSeries
ya que su tileImagery
fuente.
El objeto IgrHeatTileGenerator
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 IgrHeatTileGenerator
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
.
IgrHeatTileGenerator
también puede utilizar una escala logarítmica. Si desea utilizar esto, puede establecer la propiedad useLogarithmicScale
en verdadero.
trabajador web
IgrHeatTileGenerator
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-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);
ts
dependencias
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();
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 de 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 });
}
ts
<IgrGeographicMap
ref={this.onMapReferenced}
height="100%"
width="100%" >
<IgrGeographicTileSeries
name="heatTiles"
tileImagery={this.state.tileImagery} />
</IgrGeographicMap>
tsx