Mapa de polígonos geográficos Web Components
En el componente de mapa Web Components, puede utilizar IgcGeographicShapeSeriesComponent para mostrar datos geoespaciales utilizando polígonos de formas en un contexto geográfico. Este tipo de serie geográfica se utiliza a menudo para representar formas de países o regiones definidas por ubicaciones geográficas.
Web Components Geographic Polygon Map Example
IgcGeographicShapeSeriesComponent funciona de manera muy similar a IgcGeographicPolylineSeriesComponent, excepto que los datos geoespaciales se representan con polígonos en lugar de polilíneas.
Data Requirements
Al igual que otros tipos de series geográficas en el control de mapa, el IgcGeographicShapeSeriesComponent tiene la ItemsSource propiedad que se puede enlazar a una matriz de objetos. Además, cada elemento de datos de este objeto debe tener una columna de datos que almacene una o varias formas mediante una matriz de matrices de objetos con valores x e y que representen ubicaciones geográficas. A continuación, esta columna de datos se asigna a la shapeMemberPath propiedad. Utiliza IgcGeographicShapeSeriesComponent puntos de esta columna de datos asignados para trazar polígonos en el control de mapa.
Code Snippet
El siguiente código demuestra cómo vincular IgcGeographicShapeSeriesComponent a formas de países del mundo cargados desde un archivo de formas utilizando IgcShapeDataSource.
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
//...
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
// loading a shapefile with geographic shapes
const sds = new IgcShapeDataSource();
sds.importCompleted = this.onDataLoaded;
sds.shapefileSource = "../shapes/WorldCountries.shp";
sds.databaseSource = "../shapes/WorldCountries.dbf";
sds.dataBind();
}
onDataLoaded(sds: IgcShapeDataSource, e: any) {
const shapeRecords = sds.getPointData();
const countriesNATO: any[] = [];
const countriesSCO: any[] = [];
const countriesARAB: any[] = [];
const countriesOther: any[] = [];
for (const record of shapeRecords) {
// using field/column names from .DBF file
const country = {
points: record.points,
name: record.fieldValues.NAME,
org: record.fieldValues.ALLIANCE,
pop: record.fieldValues.POPULATION
};
const group = record.fieldValues.ALLIANCE;
if (group === "NATO") {
countriesNATO.push(country);
} else if (group === "SCO") {
countriesSCO.push(country);
} else if (group === "ARAB LEAGUE") {
countriesARAB.push(country);
} else {
countriesOther.push(country);
}
}
this.createSeries(countriesNATO, "rgb(32, 146, 252)", "NATO");
this.createSeries(countriesSCO, "rgb(252, 32, 32)", "SCO");
this.createSeries(countriesARAB, "rgb(14, 194, 14)", "AL");
this.createSeries(countriesOther, "rgb(146, 146, 146)", "Other");
}
createSeries(shapeData: any[], shapeBrush: string, shapeTitle: string)
{
const seriesName = shapeTitle + "series";
const geoSeries = new IgcGeographicShapeSeriesComponent();
geoSeries.dataSource = shapeData;
geoSeries.shapeMemberPath = "points";
geoSeries.brush = shapeBrush;
geoSeries.outline = "Black";
geoSeries.thickness = 1;
geoSeries.title = shapeTitle;
this.geoMap.series.add(geoSeries);
}