Mapa de símbolos geográficos Web Components
En el componente de mapa Web Components, puede utilizar IgcGeographicSymbolSeriesComponent para mostrar datos geoespaciales utilizando puntos o marcadores en un contexto geográfico. Este tipo de serie geográfica se utiliza a menudo para representar una colección de ubicaciones geográficas como ciudades, aeropuertos, terremotos o puntos de interés.
Web Components Geographic Symbol Map Example
Data Requirements
De manera similar a otros tipos de series geográficas en el componente de mapa, IgcGeographicSymbolSeriesComponent tiene la propiedad ItemsSource que se puede vincular a una matriz de objetos. Además, cada elemento de datos de este objeto debe tener dos columnas de datos numéricos que almacenen una ubicación geográfica (longitud y latitud). Luego, estas columnas de datos se asignan a las propiedades latitudeMemberPath y longitudeMemberPath. IgcGeographicSymbolSeriesComponent utiliza valores de estas columnas de datos mapeados para trazar elementos de símbolo en el componente de mapa geográfico.
Code Snippet
El siguiente código muestra cómo vincular IgcGeographicSymbolSeriesComponent a ubicaciones de ciudades cargadas desde un archivo de forma usando IgcShapeDataSource.
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { MarkerType } from 'igniteui-webcomponents-charts';
//...
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.addSeriesWith(WorldLocations.getCities(), "Gray");
this.addSeriesWith(WorldLocations.getCapitals(),"rgb(32, 146, 252)");
}
addSeriesWith(locations: any[], brush: string)
{
const symbolSeries = new IgcGeographicSymbolSeriesComponent ();
symbolSeries.dataSource = locations;
symbolSeries.markerType = MarkerType.Circle;
symbolSeries.latitudeMemberPath = "lat";
symbolSeries.longitudeMemberPath = "lon";
symbolSeries.markerBrush = "White";
symbolSeries.markerOutline = brush;
this.geoMap.series.add(symbolSeries);
}