Web Components Mapa geográfico de alta densidad
En el componente de mapa Web Components, puede utilizar IgcGeographicHighDensityScatterSeriesComponent
para vincular y mostrar datos dispersos que van desde cientos hasta millones de puntos de datos que requieren muy poco tiempo de carga.
Web Components Geographic High Density Map Example
La demostración anterior muestra la serie IgcGeographicHighDensityScatterSeriesComponent
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 fusiones 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 IgcGeographicHighDensityScatterSeriesComponent
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 IgcGeographicHighDensityScatterSeriesComponent
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicHighDensityScatterSeriesComponent } from 'igniteui-webcomponents-maps';
//...
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
const url = "../data/Places.csv";
fetch(url)
.then((response) => response.text())
.then(data => this.onDataLoaded(data));
}
onDataLoaded(csvData: string) {
const csvLines = csvData.split("\n");
const geoLocations: any[] = [];
for (let i = 1; i < csvLines.length; i++) {
const columns = csvLines[i].split(",");
const location = {
latitude: Number(columns[2]),
longitude: Number(columns[1]),
name: columns[0]
};
geoLocations.push(location);
}
// creating HD series with loaded data
const geoSeries = new IgcGeographicHighDensityScatterSeriesComponent();
geoSeries.dataSource = geoLocations;
geoSeries.longitudeMemberPath = "longitude";
geoSeries.latitudeMemberPath = "latitude";
geoSeries.heatMaximumColor = "Red";
geoSeries.heatMinimumColor = "Black";
geoSeries.heatMinimum = 0;
geoSeries.heatMaximum = 5;
geoSeries.pointExtent = 1;
// adding HD series to the geographic amp
this.geoMap.series.add(geoSeries);
}