React Vincular y superponer varios archivos de forma
In the Ignite UI for React map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, IgrGeographicSymbolSeries for plotting geographic locations of ports, the IgrGeographicPolylineSeries for plotting routes between ports, and the IgrGeographicShapeSeries for plotting shapes of countries.
React Binding and Overlaying Multiple Shape Files Example
Este tema te guía paso a paso hacia la visualización de múltiples series geográficas en el componente del mapa. Todas las series geográficas se trazan siguiendo datos geoespaciales cargados desde archivos de formas usando laIgrShapeDataSource clase. Consulte el tema Enlazando Archivos de Forma para más información sobreIgrShapeDataSource el objeto.
IgrGeographicSymbolSeries– muestra ubicaciones de las principales ciudadesIgrGeographicPolylineSeries– muestra rutas entre los principales puertosIgrGeographicShapeSeries– muestra las formas de los países del mundo
Puede utilizar las series geográficas anteriores u otras combinaciones para trazar los datos deseados.
Importing Components
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();
Creating 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>
);
}
Loading Shapefiles
A continuación, en el constructor de tu página, añade unIgrShapeDataSource para cada archivo shapefile que quieras 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();
Processing Polygons
El proceso da forma a los datos cargadosIgrShapeDataSource con de países del mundo y los asigna a unIgrGeographicShapeSeries objeto.
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;
}
Processing Polyline
El proceso moldea los datos cargadosIgrShapeDataSource con rutas de comunicación entre las principales ciudades y los asigna a unIgrGeographicPolylineSeries 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;
}
Processing Points
El proceso da forma a los datos cargadosIgrShapeDataSource con las ubicaciones de las principales ciudades y los asigna a unIgrGeographicSymbolSeries 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;
}
Map Background
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 = {};
Summary
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 });
}
}