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

    EXAMPLE
    DATA
    TSX

    ¿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
    Ignite UI for React | CTA Banner

    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

    Referencias de API