React 바인딩 및 여러 셰이프 파일 오버레이
Ignite UI for React 지도에서는 여러 지리적 시리즈 객체를 추가하여 몇몇 쉐이프파일을 지리공간 데이터로 겹칠 수 있습니다. 예를 들어,IgrGeographicSymbolSeries 항구의 지리적 위치를 표시하는 데 사용하고, 항구 간 경로를 표시하는 데 사용IgrGeographicPolylineSeries 하며,IgrGeographicShapeSeries 국가의 형태를 표시하는 데 사용한다.
React Binding and Overlaying Multiple Shape Files Example
이 주제는 지도 구성 요소에서 여러 지리적 연속을 표시하는 단계별로 안내합니다. 모든 지리 연속은 셰이프 파일에서 로드된 지리 공간 데이터를 따라IgrShapeDataSource 수업. 참고하세요 형태 파일 바인딩 더 많은 정보를 위한 주제IgrShapeDataSource 객체.
IgrGeographicSymbolSeries– 주요 도시의 위치 표시IgrGeographicPolylineSeries– 주요 항구 간 경로 표시IgrGeographicShapeSeries– 세계 각국의 형태를 보여줍니다
위의 지리적 계열이나 다른 조합을 사용하여 원하는 데이터를 표시할 수 있습니다.
Importing Components
먼저 필수 구성 요소와 모듈을 가져옵니다.
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
다음으로, 나중에 다른 유형의 쉐이프파일을 로드할 몇 가지 지리적 시리즈가 포함된 지도를 만들어야 합니다.
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를IgrShapeDataSource 추가하세요.
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
프로세스는 전 세계 여러 국가에 로드IgrShapeDataSource 된 데이터를 형태로 구성하여 객체에IgrGeographicShapeSeries 할당합니다.
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
프로세스 셰이프는 주요 도시 간 통신 경로에 로드된IgrShapeDataSource 데이터를 객체에IgrGeographicPolylineSeries 할당합니다.
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
프로세스 셰이프는 주요 도시의 위치와 함께 데이터를 로드IgrShapeDataSource 하여 객체에IgrGeographicSymbolSeries 할당합니다.
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
또한 모양 파일이 애플리케이션에 충분한 지리적 컨텍스트(예: 국가 모양)를 제공한 경우 지도 배경 콘텐츠에서 지리적 이미지를 숨길 수도 있습니다.
public geoMap: IgrGeographicMapComponent;
// ...
this.geoMap.backgroundContent = {};
Summary
귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사할 수 있습니다.
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 });
}
}