Mapa de polilíneas geográficas Web Components
En el componente de mapa Web Components, puede utilizar IgcGeographicPolylineSeriesComponent para mostrar datos geoespaciales utilizando polilíneas en un contexto geográfico. Este tipo de serie geográfica se utiliza a menudo para representar carreteras o conexiones entre ubicaciones geográficas como ciudades o aeropuertos.
Web Components Geographic Polyline Map Example
El IgcGeographicPolylineSeriesComponent funciona de manera muy similar al IgcGeographicShapeSeriesComponent excepto que los datos geoespaciales se representan con polilíneas en lugar de polígonos.
Data Requirements
De forma similar a otros tipos de series geográficas en el control, el IgcGeographicPolylineSeriesComponent 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 IgcGeographicPolylineSeriesComponent puntos de esta columna de datos asignados para trazar polígonos en el control.
Code Snippet
El siguiente código muestra cómo vincular IgcGeographicPolylineSeriesComponent 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 { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
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/AmericanRoads.shp";
sds.databaseSource = "../shapes/AmericanRoads.dbf";
sds.dataBind();
}
onDataLoaded(sds: IgcShapeDataSource, e: any) {
const shapeRecords = sds.getPointData();
console.log("loaded AmericanRoads.shp " + shapeRecords.length);
const roadsUSA: any[] = [];
const roadsMEX: any[] = [];
const roadsCAN: any[] = [];
// filtering records of loaded shapefile
for (const record of shapeRecords) {
// reading field values loaded from DBF file
const type = record.fieldValues.RoadType;
const road = {
country: record.fieldValues.Country,
length: record.fieldValues.RoadLength / 10,
points: record.points,
type: type === 1 ? "Highway" : "Road",
};
// grouping road items by country names
if (type === 1 || type === 2) {
if (road.country === "USA") {
roadsUSA.push(road);
} else if (road.country === "MEX") {
roadsMEX.push(road);
} else if (road.country === "CAN") {
roadsCAN.push(road);
}
}
}
// creating polyline series for roads of each country
this.addSeriesWith(roadsCAN, "rgba(252, 32, 32, 0.9)");
this.addSeriesWith(roadsUSA, "rgba(3, 121, 231, 0.9)");
this.addSeriesWith(roadsMEX, "rgba(14, 194, 14, 0.9)");
}
public addSeriesWith(shapeData: any[], shapeBrush: string) {
const lineSeries = new IgcGeographicPolylineSeriesComponent();
lineSeries.dataSource = shapeData;
lineSeries.shapeMemberPath = "points";
lineSeries.shapeFilterResolution = 2.0;
lineSeries.shapeStrokeThickness = 2;
lineSeries.shapeStroke = shapeBrush;
this.geoMap.series.add(lineSeries);
}