Vinculación de archivos de formas con datos geoespaciales React
El componente de mapa Ignite UI for React, la clase IgrShapeDataSource
carga datos geoespaciales (puntos/ubicaciones, polilíneas, polígonos) desde archivos de formas y los convierte en una colección de objetos IgrShapefileRecord
.
Ejemplo de vinculación de archivos de formas con datos geoespaciales React
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
La siguiente tabla explica las propiedades de la clase IgrShapeDataSource
para cargar archivos de formas.
Propiedad | Tipo | Descripción |
---|---|---|
shapefileSource |
cadena | Especifica el Uri de un archivo de forma (.shp) que contiene elementos de datos geoespaciales. |
databaseSource |
cadena | Especifica el Uri de un archivo de base de datos de formas (.dbf) que contiene una tabla de datos para elementos de datos geoespaciales. |
Cuando ambas propiedades de origen se establecen en valores no nulos, se invoca el método ImportAsync del objeto IgrShapeDataSource
, que a cambio recupera y lee los archivos de formas y finalmente realiza la conversión. Una vez completada esta operación, IgrShapeDataSource
se completa con objetos IgrShapefileRecord
y se genera el evento ImportCompleted
para notificar sobre el proceso completado de carga y conversión de datos geoespaciales de archivos de formas.
Cargando archivos de forma
El siguiente código crea una instancia del objeto IgrShapeDataSource
para cargar un archivo de forma que contiene ubicaciones de las principales ciudades del mundo. También demuestra cómo manejar el evento ImportCompleted
como requisito previo para vincular datos al componente del mapa.
import { IgrShapeDataSource } from 'igniteui-react-core';
// ...
const sds = new IgrShapeDataSource();
sds.importCompleted = this.onShapePolylinesLoaded;
sds.shapefileSource = url + "/shapes/WorldCableRoutes.shp";
sds.databaseSource = url + "/shapes/WorldCableRoutes.dbf";
sds.dataBind();
ts
Archivos de forma vinculantes
En el componente de mapa, las series geográficas se utilizan para mostrar datos geoespaciales que se cargan desde archivos de formas. Todos los tipos de series geográficas tienen una propiedad ItemsSource
que se puede vincular a una serie de objetos. IgrShapeDataSource
es un ejemplo de este tipo de matriz porque contiene una lista de objetos IgrShapefileRecord
.
La clase IgrShapefileRecord
proporciona propiedades para almacenar datos geoespaciales, que se enumeran en la siguiente tabla.
Propiedad | Descripción |
---|---|
Points |
Contiene todos los puntos en una forma geoespacial cargada desde un archivo de forma (.shp). Por ejemplo, el país de Japón en un archivo de forma se representaría como una lista de un objeto de lista de puntos, donde:
|
Esta estructura de datos es adecuada para su uso en la mayoría de las series geográficas siempre que se les asigne las columnas de datos adecuadas.
Fragmento de código
Este ejemplo de código supone que los archivos de formas se cargaron utilizando IgrShapeDataSource
. El siguiente código vincula IgrGeographicPolylineSeries
en el componente de mapa a IgrShapeDataSource
y asigna la propiedad Points
de todos los objetos IgrShapefileRecord
.
import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
// ...
public onShapePolylinesLoaded(sds: IgrShapeDataSource, e: any) {
const geoPolylines: any[] = [];
for (const record of sds.getPointData()) {
// using field/column names from .DBF file
const route = {
points: record.points,
name: record.fieldValues["Name"],
capacity: record.fieldValues["CapacityG"],
distance: record.fieldValues["DistanceKM"],
isOverLand: record.fieldValues["OverLand"] === 0,
isActive: record.fieldValues["NotLive"] !== 0,
service: record.fieldValues["InService"]
};
geoPolylines.push(route);
}
const geoSeries = new IgrGeographicPolylineSeries( { name: "series" });
geoSeries.dataSource = geoPolylines;
geoSeries.shapeMemberPath = "points";
geoSeries.shapeFilterResolution = 0.0;
geoSeries.shapeStrokeThickness = 3;
geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
geoSeries.tooltipTemplate = this.createTooltip;
this.geoMap.series.add(symbolSeries);
}
ts
Referencias de API
Fields
IgrGeographicPolylineSeries
ImportCompleted
ItemsSource
Points
IgrShapeDataSource