React Vinculando e sobrepondo vários arquivos de forma
No mapa Ignite UI for React, você pode adicionar vários objetos de série geográfica para sobrepor alguns shapefiles com dados geoespaciais. Por exemplo, IgrGeographicSymbolSeries para plotar localizações geográficas de portos, para IgrGeographicPolylineSeries plotar rotas entre portos e para IgrGeographicShapeSeries plotar formas de países.
React Binding and Overlaying Multiple Shape Files Example
Este tópico mostra passo a passo a exibição de várias séries geográficas no componente de mapa. Todas as séries geográficas são plotadas seguindo dados geoespaciais carregados de arquivos de forma usando o IgrShapeDataSource classe. Consulte o Arquivos de forma de associação para obter mais informações sobre IgrShapeDataSource objeto.
IgrGeographicSymbolSeries– exibe a localização das principais cidadesIgrGeographicPolylineSeries– exibe rotas entre os principais portosIgrGeographicShapeSeries– exibe formas de países do mundo
Você pode usar a série geográfica acima ou outras combinações para plotar os dados desejados.
Importing Components
Primeiro, vamos importar os componentes e módulos necessários:
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
Em seguida, precisamos criar um mapa com algumas séries geográficas que posteriormente carregarão diferentes tipos de shapefile.
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
Em seguida, no construtor da página, adicione um IgrShapeDataSource para cada shapefile que você deseja exibir no 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
Processe os dados carregados em IgrShapeDataSource países do mundo e atribua-os ao IgrGeographicShapeSeries 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
O processo molda os dados carregados com IgrShapeDataSource rotas de comunicação entre as principais cidades e os atribui ao 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;
}
Processing Points
O processo molda os dados carregados com IgrShapeDataSource locais das principais cidades e os atribui ao IgrGeographicSymbolSeries 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
Além disso, talvez você queira ocultar imagens geográficas do conteúdo de plano de fundo do mapa se seus arquivos de forma fornecerem contexto geográfico suficiente (por exemplo, forma de países) para seu aplicativo.
public geoMap: IgrGeographicMapComponent;
// ...
this.geoMap.backgroundContent = {};
Summary
Para sua conveniência, todos os trechos de código acima são combinados em um bloco de código abaixo que você pode copiar facilmente para seu projeto.
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 });
}
}