Mapa de burbujas geográficas Web Components
En el componente de mapa Web Components, puede utilizar IgcGeographicProportionalSymbolSeriesComponent para trazar burbujas o marcadores proporcionales en las ubicaciones geográficas especificadas por los datos de su aplicación. Esta serie de mapas puede resultar útil para resaltar puntos de interés en su caso de negocio particular, como grandes almacenes, almacenes u oficinas. También puede utilizar esta serie de mapas en un sistema de gestión de flotas o en un sistema GPS para seguimiento dinámico de vehículos.
Web Components Geographic Bubble Map Example
La demostración anterior muestra la serie IgcGeographicProportionalSymbolSeriesComponent y cómo especificar las opciones de enlace de datos de la serie. La selección automática de marcadores se configura junto con la lógica para evitar colisiones de marcadores, y también se especifican el contorno del marcador y los colores de relleno.
Configuration Summary
De manera similar a otros tipos de series de dispersión en el control de mapa, la serie IgcGeographicProportionalSymbolSeriesComponent 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. La configuración radiusScale y radiusMemberPath configura el radio de las burbujas.
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. |
radiusMemberPath |
cadena | Establece la ruta que se utilizará para obtener los valores de radio de la serie. |
radiusScale |
IgcSizeScaleComponent |
Obtiene o establece la propiedad de escala de radio para la serie de burbujas actual. |
minimumValue |
cualquier | Configure el valor mínimo para calcular los subrangos de valores. |
maximumValue |
cualquier | Configure el valor máximo para calcular los subrangos de valores. |
Code Snippet
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicProportionalSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcValueBrushScaleComponent } from 'igniteui-webcomponents-charts';
import { IgcSizeScaleComponent } from 'igniteui-webcomponents-charts';
//...
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.addSeriesWith(WorldLocations.getAll());
}
addSeriesWith(locations: any[])
{
const sizeScale = new IgcSizeScaleComponent();
sizeScale.minimumValue = 4;
sizeScale.maximumValue = 60;
const brushes = [
"rgba(14, 194, 14, 0.4)", // semi-transparent green
"rgba(252, 170, 32, 0.4)", // semi-transparent orange
"rgba(252, 32, 32, 0.4)", // semi-transparent red
];
const brushScale = new IgcValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const symbolSeries = new IgcGeographicProportionalSymbolSeriesComponent ();
symbolSeries.dataSource = locations;
symbolSeries.markerType = MarkerType.Circle;
symbolSeries.radiusScale = sizeScale;
symbolSeries.fillScale = brushScale;
symbolSeries.fillMemberPath = "pop";
symbolSeries.radiusMemberPath = "pop";
symbolSeries.latitudeMemberPath = "lat";
symbolSeries.longitudeMemberPath = "lon";
symbolSeries.markerOutline = "rgba(0,0,0,0.3)";
this.geoMap.series.add(symbolSeries);
}