React Vincular y superponer varios archivos de forma
En el mapa Ignite UI for React, puede agregar varios objetos de series geográficas para superponer algunos shapefiles con datos geoespaciales. Por ejemplo, IgrGeographicSymbolSeries
para trazar ubicaciones geográficas de puertos, para IgrGeographicPolylineSeries
trazar rutas entre puertos y para IgrGeographicShapeSeries
trazar formas de países.
React Ejemplo de enlace y superposición de varios archivos de forma
¿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.
En este tema se explica paso a paso la visualización de varias series geográficas en el componente de mapa. Todas las series geográficas se trazan siguiendo los datos geoespaciales cargados desde los archivos de forma utilizando el comando IgrShapeDataSource
clase. Refiérase a la Enlazar archivos de formas para obtener más información sobre IgrShapeDataSource
objeto.
IgrGeographicSymbolSeries
– muestra las ubicaciones de las principales ciudadesIgrGeographicPolylineSeries
– muestra las rutas entre los principales puertosIgrGeographicShapeSeries
– muestra formas de países del mundo
Puede utilizar las series geográficas anteriores u otras combinaciones para trazar los datos deseados.
Importación de componentes
Primero, importemos los componentes y módulos necesarios:
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { IgrDataContext } from 'igniteui-react-core';
import { IgrShapeDataSource } from 'igniteui-react-core';
IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
ts
Creando series
A continuación, necesitamos crear un mapa con algunas series geográficas que luego cargarán diferentes tipos de archivos de forma.
public render() {
return (
<IgrGeographicMap
width="100%"
height="100%"
zoomable="true" >
<IgrGeographicShapeSeries
name="polygonSeries"
dataSource={this.state.polygons}
shapeMemberPath="points"
shapeFill="rgb(150, 150, 150)"
shapeStroke="Black"
shapeStrokeThickness={1.0} />
<IgrGeographicPolylineSeries
name="lineSeries"
dataSource={this.state.polylines}
shapeMemberPath="points"
shapeStroke="rgba(147, 15, 180, 0.5)"
thickness={3.0} />
<IgrGeographicSymbolSeries
name="symbolSeries"
dataSource={this.state.locations}
longitudeMemberPath="longitude"
latitudeMemberPath="latitude"
markerType="Circle"
markerOutline="rgb(2, 102, 196)"
markerBrush="White" />
</IgrGeographicMap>
);
}
tsx
Cargando archivos de forma
A continuación, en el constructor de la página, agregue un IgrShapeDataSource
shapefile para cada shapefile que desee mostrar en el componente de mapa geográfico.
const sdsPolygons = new IgrShapeDataSource();
sdsPolygons.importCompleted = this.onPolygonsLoaded;
sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
sdsPolygons.databaseSource = url + "/shapes/WorldCountries.dbf";
sdsPolygons.dataBind();
const sdsPolylines = new IgrShapeDataSource();
sdsPolylines.importCompleted = this.onPolylinesLoaded;
sdsPolylines.shapefileSource = url + "/shapes/WorldConnections.shp";
sdsPolylines.databaseSource = url + "/shapes/WorldConnections.dbf";
sdsPolylines.dataBind();
const sdsLocations = new IgrShapeDataSource();
sdsLocations.importCompleted = this.onPointsLoaded;
sdsLocations.shapefileSource = url + "/Shapes/WorldCities.shp";
sdsLocations.databaseSource = url + "/Shapes/WorldCities.dbf";
sdsLocations.dataBind();
ts
Procesamiento de polígonos
Procese los datos de formas cargados en IgrShapeDataSource
los países del mundo y asígnelos a IgrGeographicShapeSeries
objetos.
import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
import { IgrShapeDataSource } from 'igniteui-react-core';
// ...
public onPolygonsLoaded(sds: IgrShapeDataSource, e: any) {
const geoPolygons: any[] = [];
// parsing shapefile data and creating geo-polygons
let pointData = sds.getPointData();
for ( let i = 0; i < pointData.length; i++ ) {
let record = pointData[i];
// using field/column names from .DBF file
const country = {
points: record.points,
name: record.fieldValues.NAME,
gdp: record.fieldValues.GDP,
population: record.fieldValues.POPULATION
};
geoPolygons.push(country);
};
const shapeSeries = this.geoMap.series[0] as IgrGeographicShapeSeries;
shapeSeries.dataSource = geoPolygons;
}
ts
Procesamiento de polilínea
Procese los datos de formas cargados con las rutas de IgrShapeDataSource
comunicación entre las principales ciudades y asígnelos a un IgrGeographicPolylineSeries
objeto.
import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
import { IgrShapeDataSource } from 'igniteui-react-core';
// ...
public onPolylinesLoaded(sds: IgrShapeDataSource, e: any) {
const geoPolylines: any[] = [];
// parsing shapefile data and creating geo-polygons
let pointData = sds.getPointData();
for ( let i = 0; i < pointData.length; i++ ) {
let record = pointData[i];
// 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 lineSeries = this.geoMap.series[1] as IgrGeographicPolylineSeries;
lineSeries.dataSource = geoPolylines;
}
ts
Puntos de procesamiento
Procese datos de formas cargados IgrShapeDataSource
con ubicaciones de las principales ciudades y asígnelos a IgrGeographicSymbolSeries
un objeto.
import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
import { MarkerType } from 'igniteui-react-charts';
// ...
public onPointsLoaded(sds: IgrShapeDataSource, e: any) {
const geoLocations: any[] = [];
// parsing shapefile data and creating geo-locations
let pointData = sds.getPointData();
for ( let i = 0; i < pointData.length; i++ ) {
let record = pointData[i];
const pop = record.fieldValues.POPULATION;
if (pop > 0) {
// each shapefile record has just one point
const location = {
latitude: record.points[0][0].y,
longitude: record.points[0][0].x,
city: record.fieldValues.NAME,
population: pop
};
geoLocations.push(location);
}
}
const symbolSeries = this.geoMap.series[2] as IgrGeographicSymbolSeries;
symbolSeries.dataSource = geoLocations;
}
ts
Fondo del mapa
Además, es posible que desee ocultar imágenes geográficas del contenido de fondo del mapa si sus archivos de forma proporcionaron suficiente contexto geográfico (por ejemplo, forma de países) para su aplicación.
public geoMap: IgrGeographicMapComponent;
// ...
this.geoMap.backgroundContent = {};
ts
Resumen
Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto.
import * as React from "react";
import "../styles.css";
import "./GeoMapStyles.css";
import DataUtils from "../../utilities/DataUtils"
import WorldUtils from "../../utilities/WorldUtils"
import { IgrGeographicMapImagery } from 'igniteui-react-maps';
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { IgrDataContext } from 'igniteui-react-core';
import { IgrShapeDataSource } from 'igniteui-react-core';
IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
export default class MapBindingMultipleShapes extends React.Component<any,any> {
public geoMap: IgrGeographicMap;
constructor(props: any) {
super(props);
this.onMapReferenced = this.onMapReferenced.bind(this);
this.onPointsLoaded = this.onPointsLoaded.bind(this);
this.onPolylinesLoaded = this.onPolylinesLoaded.bind(this);
this.onPolygonsLoaded = this.onPolygonsLoaded.bind(this);
this.state = { locations: [], polylines: [], polygons: []}
}
public render() {
const mapStyle = { background: "rgb(212, 212, 212)" } as React.CSSProperties;
return (
<div className="sampleRoot">
<div className="map" style={mapStyle} >
<IgrGeographicMap
ref={this.onMapReferenced}
width="100%"
height="100%"
zoomable="true" >
<IgrGeographicShapeSeries
name="polygonSeries"
dataSource={this.state.polygons}
shapeMemberPath="points"
shapeFill="rgb(150, 150, 150)"
shapeStroke="Black"
shapeStrokeThickness={1.0} />
<IgrGeographicPolylineSeries
name="lineSeries"
dataSource={this.state.polylines}
shapeMemberPath="points"
shapeStroke="rgba(147, 15, 180, 0.5)"
thickness={3.0} />
<IgrGeographicSymbolSeries
name="symbolSeries"
dataSource={this.state.locations}
longitudeMemberPath="longitude"
latitudeMemberPath="latitude"
markerType="Circle"
markerOutline="rgb(2, 102, 196)"
markerBrush="White" />
</IgrGeographicMap>
</div>
</div>
);
}
public onMapReferenced(map: IgrGeographicMap) {
this.geoMap = map;
this.geoMap.backgroundContent = undefined;
this.geoMap.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
console.log("series.count " + this.geoMap.series.count);
console.log("actualSeries.length " + this.geoMap.actualSeries.length);
this.geoMap.actualSeries[0].tooltipTemplate = this.getPolygonsTooltip;
this.geoMap.actualSeries[1].tooltipTemplate = this.getPolylinesTooltip;
this.geoMap.actualSeries[2].tooltipTemplate = this.getPointTooltip;
const url = DataUtils.getPublicURL();
// loading a shapefile with geographic polygons
const sdsPolygons = new IgrShapeDataSource();
sdsPolygons.importCompleted = this.onPolygonsLoaded;
sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
sdsPolygons.databaseSource = url + "/shapes/WorldCountries.dbf";
sdsPolygons.dataBind();
const sdsPolylines = new IgrShapeDataSource();
sdsPolylines.importCompleted = this.onPolylinesLoaded;
sdsPolylines.shapefileSource = url + "/shapes/WorldCableRoutes.shp";
sdsPolylines.databaseSource = url + "/shapes/WorldCableRoutes.dbf";
sdsPolylines.dataBind();
// loading a shapefile with geographic points
const sdsPoints = new IgrShapeDataSource();
sdsPoints.importCompleted = this.onPointsLoaded;
sdsPoints.shapefileSource = url + "/Shapes/WorldCities.shp";
sdsPoints.databaseSource = url + "/Shapes/WorldCities.dbf";
sdsPoints.dataBind();
}
public onPointsLoaded(sds: IgrShapeDataSource, e: any) {
const geoLocations: any[] = [];
// parsing shapefile data and creating geo-locations
for (const record of sds.getPointData()) {
const pop = record.fieldValues.POPULATION;
if (pop > 0) {
// each shapefile record has just one point
const location = {
latitude: record.points[0][0].y,
longitude: record.points[0][0].x,
city: record.fieldValues.NAME,
population: pop
};
geoLocations.push(location);
}
}
this.setState({ locations: geoLocations });
}
public onPolylinesLoaded(sds: IgrShapeDataSource, e: any) {
const geoPolylines: any[] = [];
// parsing shapefile data and creating geo-polygons
sds.getPointData().forEach(record => {
// 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);
});
this.setState({ polylines: geoPolylines });
}
public onPolygonsLoaded(sds: IgrShapeDataSource, e: any) {
const geoPolygons: any[] = [];
// parsing shapefile data and creating geo-polygons
sds.getPointData().forEach(record => {
// using field/column names from .DBF file
const country = {
points: record.points,
name: record.fieldValues.NAME,
gdp: record.fieldValues.GDP,
population: record.fieldValues.POPULATION
};
geoPolygons.push(country);
});
this.setState({ polygons: geoPolygons });
}
}
ts