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

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    ¿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
    App Builder | CTA Banner

    Referencias de API