Mapa geográfico Angular de alta densidad

En el componente de mapa Angular, puede utilizar IgxGeographicHighDensityScatterSeriesComponent para vincular y mostrar datos dispersos que van desde cientos hasta millones de puntos de datos que requieren un tiempo de carga extremadamente corto.

Angular Geographic High Density Map Example

La demostración anterior muestra la serie IgxGeographicHighDensityScatterSeriesComponent en el componente de mapa vinculada a cientos o incluso miles de puntos de datos que representan la densidad de población de Australia. El área de trazado del mapa con puntos de datos más densamente poblados se representa como coalescencias de píxeles rojos y puntos de datos distribuidos libremente mediante píxeles azules discretos.

Debido a que hay tantos puntos de datos, la serie muestra los datos dispersos como puntos pequeños en lugar de marcadores de tamaño completo, y muestra las áreas con la mayor cantidad de datos utilizando una mayor densidad de color que representa un grupo de puntos de datos.

Data Requirements

De manera similar a otros tipos de series de dispersión en el control de mapa, la serie IgxGeographicHighDensityScatterSeriesComponent tiene la propiedad ItemsSource que se puede vincular a una matriz de objetos. Además, cada elemento de datos en el origen de elementos debe tener dos columnas de datos que almacenen coordenadas geográficas de longitud y latitud y utilice las propiedades longitudeMemberPath y latitudeMemberPath para asignar estas columnas de datos.

Data Binding

La siguiente tabla resume las propiedades de la serie GeographicHighDensityScatterSeries utilizadas para el enlace de datos.

Propiedad	Tipo	Descripción
`ItemsSource`	cualquier	Obtiene o establece el origen de los elementos.
`longitudeMemberPath`	cadena	Utiliza la propiedad ItemsSource para determinar la ubicación de los valores de longitud en los elementos asignados.
`latitudeMemberPath`	cadena	Utiliza la propiedad ItemsSource para determinar la ubicación de los valores de latitud en los elementos asignados.

Heat Color Scale

La Escala de colores térmicos, una característica opcional, determina el patrón de colores dentro de la serie. La siguiente tabla resume las propiedades utilizadas para determinar la escala de colores.

Propiedad	Tipo	Descripción
`heatMinimum`	Doble	Define el valor doble que representa el extremo mínimo de la escala de colores.
`heatMaximum`	Doble	Define el valor doble que representa el extremo máximo de la escala de colores.
`heatMinimumColor`	Color	Define el color de densidad de puntos utilizado en el extremo inferior de la escala de colores.
`heatMaximumColor`	Color	Define el color de densidad de puntos utilizado en el extremo superior de la escala de colores.

Code Example

El siguiente código demuestra cómo configurar las propiedades heatMinimumColor y heatMaximumColor de IgxGeographicHighDensityScatterSeriesComponent

<div className="sampleRoot" >
    <igx-geographic-map #map
        width="700px"
        height="500px"
        zoomable="true" >
    </igx-geographic-map>
</div>

<ng-template let-series="series" let-item="item" #template>
    <div>
        <span>
            {{item.n}}
        </span>
    </div>
</ng-template>

import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicHighDensityScatterSeriesComponent } from 'igniteui-angular-maps';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { WorldUtils } from "../../utilities/WorldUtils";

@Component({
  selector: "app-map-geographic-scatter-density-series",
  styleUrls: ["./map-geographic-scatter-density-series.component.scss"],
  templateUrl: ".map-geographic-scatter-density-series.component.html"
})

export class MapTypeScatterDensitySeriesComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;
    @ViewChild("template")
    public tooltip: TemplateRef<object>;

    public geoLocations;
    constructor() {
    }

    public ngAfterViewInit(): void {
         // fetching geographic locations from public JSON folder
         fetch("assets/Data/AusPlaces.json")
         .then((response) => response.json())
         .then((data) => this.onDataLoaded(data, ""));
      }

    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
        this.geoLocations = sds;
        // creating HD series with loaded data
        const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent();
        geoSeries.dataSource = sds;
        geoSeries.longitudeMemberPath = "x";
        geoSeries.latitudeMemberPath = "y";
        geoSeries.heatMaximumColor = "Red";
        geoSeries.heatMinimumColor = "Black";
        geoSeries.heatMinimum = 0;
        geoSeries.heatMaximum = 5;
        geoSeries.pointExtent = 1;
        geoSeries.tooltipTemplate = this.tooltip;
        geoSeries.mouseOverEnabled = true;

        // adding HD series to the geographic amp
        this.map.series.add(geoSeries);

        // zooming to bound of all geographic locations
        const geoBounds = WorldUtils.getBounds(this.geoLocations);
        geoBounds.top = 0;
        geoBounds.height = -50;
        this.map.zoomToGeographic(geoBounds);
    }
}