여러 모양 파일을 바인딩하고 오버레이하는 Web Components
Ignite UI for Web Components 맵에서는 여러 지리적 계열 개체를 추가하여 지리 공간 데이터로 몇 가지 쉐이프파일을 오버레이할 수 있습니다. 예를 들어, 항구의 지리적 위치를 그리는 데 IgcGeographicSymbolSeriesComponent, 항구 사이의 경로를 그리는 데 IgcGeographicPolylineSeriesComponent, 국가의 형태를 그리는 데 IgcGeographicShapeSeriesComponent 있습니다.
Web Components Binding and Overlaying Multiple Shape Files Example
이 항목에서는 지도 구성 요소에 여러 지리적 계열을 표시하는 방법을 단계별로 안내합니다. 다음을 사용하여 모양 파일에서 로드된 지리 공간 데이터를 따르는 모든 지리 계열 플롯 IgcShapeDataSource 수업. 다음을 참조하세요. 모양 파일 바인딩 자세한 내용은 주제를 참조하세요. IgcShapeDataSource 물체.
IgcGeographicSymbolSeriesComponent– 주요 도시의 위치를 표시합니다.IgcGeographicPolylineSeriesComponent– 주요 포트 간의 경로를 표시합니다.IgcGeographicShapeSeriesComponent– 세계 국가의 모양을 표시합니다.
위의 지리적 계열이나 다른 조합을 사용하여 원하는 데이터를 표시할 수 있습니다.
Importing Components
먼저 필수 구성 요소와 모듈을 가져옵니다.
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
Creating Series
다음으로, 나중에 다른 유형의 쉐이프파일을 로드할 몇 가지 지리적 시리즈가 포함된 지도를 만들어야 합니다.
<igc-geographic-map id="geoMap" width="100%" height="100%" >
<igc-geographic-shape-series
id="polygonSeries"
shape-memberPath="points"
shape-fill="rgb(150, 150, 150)"
shape-stroke="Black"
shape-stroke-thickness="1.0">
</igc-geographic-shape-series>
<igc-geographic-polyline-series
id="lineSeries"
shape-member-path="points"
shape-stroke="rgba(147, 15, 180, 0.5)"
thickness="3.0" >
</igc-geographic-polyline-series>
<igc-geographic-symbol-series
id="symbolSeries"
longitude-member-path="longitude"
latitude-member-path="latitude"
marker-type="Circle"
marker-outline="rgb(2, 102, 196)"
marker-brush="White">
</igc-geographic-symbol-series>
</igc-geographic-map>
Loading Shapefiles
다음으로, 페이지 생성자에서 지리 지도 구성 요소에 표시하려는 각 모양 파일에 대해 IgcShapeDataSource 추가합니다.
const sdsPolygons = new IgcShapeDataSource();
sdsPolygons.importCompleted = this.onPolygonsLoaded;
sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
sdsPolygons.databaseSource = url + "/shapes/WorldCountries.dbf";
sdsPolygons.dataBind();
const sdsPolylines = new IgcShapeDataSource();
sdsPolylines.importCompleted = this.onPolylinesLoaded;
sdsPolylines.shapefileSource = url + "/shapes/WorldConnections.shp";
sdsPolylines.databaseSource = url + "/shapes/WorldConnections.dbf";
sdsPolylines.dataBind();
const sdsLocations = new IgcShapeDataSource();
sdsLocations.importCompleted = this.onPointsLoaded;
sdsLocations.shapefileSource = url + "/Shapes/WorldCities.shp";
sdsLocations.databaseSource = url + "/Shapes/WorldCities.dbf";
sdsLocations.dataBind();
Processing Polygons
IgcShapeDataSource에 로드된 세계 각국의 도형 데이터를 처리하여 IgcGeographicShapeSeriesComponent 객체에 할당합니다.
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
// ...
public onPolygonsLoaded(sds: IgcShapeDataSource, 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);
};
let polygonSeries = (document.getElementById("polygonSeries") as IgcGeographicShapeSeriesComponent);
polygonSeries.dataSource = geoPolygons;
polygonSeries.renderSeries(false);
}
Processing Polyline
IgcShapeDataSource에 로드된 형상 데이터를 주요 도시 간 통신 경로로 처리하여 IgcGeographicPolylineSeriesComponent 객체에 할당합니다.
import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
// ...
public onPolylinesLoaded(sds: IgcShapeDataSource, 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);
}
let lineSeries = (document.getElementById("lineSeries") as IgcGeographicPolylineSeriesComponent);
lineSeries.dataSource = geoPolylines;
lineSeries.renderSeries(false);
}
Processing Points
IgcShapeDataSource에 로드된 도형 데이터를 주요 도시의 위치와 함께 처리하여 IgcGeographicSymbolSeriesComponent 개체에 할당합니다.
import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
// ...
public onPointsLoaded(sds: IgcShapeDataSource, 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);
}
}
let symbolSeries = (document.getElementById("symbolSeries") as IgcGeographicSymbolSeriesComponent);
symbolSeries.dataSource = geoLocations;
symbolSeries.renderSeries(false);
}
Map Background
또한 모양 파일이 애플리케이션에 충분한 지리적 컨텍스트(예: 국가 모양)를 제공한 경우 지도 배경 콘텐츠에서 지리적 이미지를 숨길 수도 있습니다.
public geoMap: IgcGeographicMapComponent;
// ...
this.geoMap.backgroundContent = null;
Summary
귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사할 수 있습니다.
import { SampleBase } from "../../sample-base";
import { AssetsUtils } from "../../../utilities/AssetsUtils";
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
let templateHTML = `
<div class="sample-container" style="background: #aad3df;">
<igc-geographic-map id="geoMap" width="100%" height="100%" >
<igc-geographic-shape-series
id="polygonSeries"
shape-memberPath="points"
shape-fill="rgb(150, 150, 150)"
shape-stroke="Black"
shape-stroke-thickness="1.0">
</igc-geographic-shape-series>
<igc-geographic-polyline-series
id="lineSeries"
shape-member-path="points"
shape-stroke="rgba(147, 15, 180, 0.5)"
thickness="3.0" >
</igc-geographic-polyline-series>
<igc-geographic-symbol-series
id="symbolSeries"
longitude-member-path="longitude"
latitude-member-path="latitude"
marker-type="Circle"
marker-outline="rgb(2, 102, 196)"
marker-brush="White">
</igc-geographic-symbol-series>
</igc-geographic-map>
</div>
`;
export class MapBindingMultipleShapes extends SampleBase {
public static htmlTagName: string = SampleBase.tag("MapBindingMultipleShapes");
public static register(): any {
window.customElements.define(this.htmlTagName, MapBindingMultipleShapes); return this;
}
private geoMap: IgcGeographicMapComponent;
constructor() {
super();
this.onPointsLoaded = this.onPointsLoaded.bind(this);
this.onPolylinesLoaded = this.onPolylinesLoaded.bind(this);
this.onPolygonsLoaded = this.onPolygonsLoaded.bind(this);
}
connectedCallback() {
this.innerHTML = templateHTML;
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.geoMap.backgroundContent = null;
this.geoMap.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
const url = AssetsUtils.getAssetsPath();
const sdsPolygons = new IgcShapeDataSource();
sdsPolygons.importCompleted = this.onPolygonsLoaded;
sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
sdsPolygons.databaseSource = url + "/shapes/WorldCountries.dbf";
sdsPolygons.dataBind();
const sdsPolylines = new IgcShapeDataSource();
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 IgcShapeDataSource();
sdsPoints.importCompleted = this.onPointsLoaded;
sdsPoints.shapefileSource = url + "/shapes/WorldCities.shp";
sdsPoints.databaseSource = url + "/shapes/WorldCities.dbf";
sdsPoints.dataBind();
}
public onPointsLoaded(sds: IgcShapeDataSource, e: any) {
console.log("onPoints");
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);
}
}
let symbolSeries = (document.getElementById("symbolSeries") as IgcGeographicSymbolSeriesComponent);
symbolSeries.dataSource = geoLocations;
symbolSeries.renderSeries(false);
}
public onPolylinesLoaded(sds: IgcShapeDataSource, e: any) {
console.log("onPolylines");
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);
}
let lineSeries = (document.getElementById("lineSeries") as IgcGeographicPolylineSeriesComponent);
lineSeries.dataSource = geoPolylines;
lineSeries.renderSeries(false);
}
public onPolygonsLoaded(sds: IgcShapeDataSource, e: any) {
console.log("onPolygons ");
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);
};
let polygonSeries = (document.getElementById("polygonSeries") as IgcGeographicShapeSeriesComponent);
polygonSeries.dataSource = geoPolygons;
polygonSeries.renderSeries(false);
}
}