Web Components 지리적 다각형 지도
Web Components 지도 구성 요소에서는 IgcGeographicShapeSeriesComponent
사용하여 지리적 맥락에서 모양 다각형을 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리 시리즈는 지리적 위치로 정의된 국가 또는 지역의 모양을 렌더링하는 데 자주 사용됩니다.
Web Components Geographic Polygon Map Example
IgcGeographicShapeSeriesComponent
는 지리 공간 데이터가 폴리라인 대신 다각형으로 렌더링된다는 점을 제외하면 IgcGeographicPolylineSeriesComponent
매우 유사하게 작동합니다.
Data Requirements
지도 컨트롤에 있는 다른 유형의 지리 계열과 마찬가지로 에는 IgcGeographicShapeSeriesComponent
개체 배열에 바인딩할 수 있는 속성이 있습니다 ItemsSource
. 또한 이 개체의 각 데이터 항목에는 지리적 위치를 나타내는 x 및 y 값이 있는 개체 배열 배열을 사용하여 단일/다중 모양을 저장하는 하나의 데이터 열이 있어야 합니다. 그런 다음 이 데이터 열이 속성에 매핑됩니다 shapeMemberPath
. 이 IgcGeographicShapeSeriesComponent
매핑된 데이터 열의 점을 사용하여 지도 컨트롤에 다각형을 그립니다.
Code Snippet
다음 코드는 IgcShapeDataSource
를 사용하여 모양 파일에서 로드된 전 세계 국가의 모양에 IgcGeographicShapeSeriesComponent
바인딩하는 방법을 보여줍니다.
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
//...
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
// loading a shapefile with geographic shapes
const sds = new IgcShapeDataSource();
sds.importCompleted = this.onDataLoaded;
sds.shapefileSource = "../shapes/WorldCountries.shp";
sds.databaseSource = "../shapes/WorldCountries.dbf";
sds.dataBind();
}
onDataLoaded(sds: IgcShapeDataSource, e: any) {
const shapeRecords = sds.getPointData();
const countriesNATO: any[] = [];
const countriesSCO: any[] = [];
const countriesARAB: any[] = [];
const countriesOther: any[] = [];
for (const record of shapeRecords) {
// using field/column names from .DBF file
const country = {
points: record.points,
name: record.fieldValues.NAME,
org: record.fieldValues.ALLIANCE,
pop: record.fieldValues.POPULATION
};
const group = record.fieldValues.ALLIANCE;
if (group === "NATO") {
countriesNATO.push(country);
} else if (group === "SCO") {
countriesSCO.push(country);
} else if (group === "ARAB LEAGUE") {
countriesARAB.push(country);
} else {
countriesOther.push(country);
}
}
this.createSeries(countriesNATO, "rgb(32, 146, 252)", "NATO");
this.createSeries(countriesSCO, "rgb(252, 32, 32)", "SCO");
this.createSeries(countriesARAB, "rgb(14, 194, 14)", "AL");
this.createSeries(countriesOther, "rgb(146, 146, 146)", "Other");
}
createSeries(shapeData: any[], shapeBrush: string, shapeTitle: string)
{
const seriesName = shapeTitle + "series";
const geoSeries = new IgcGeographicShapeSeriesComponent();
geoSeries.dataSource = shapeData;
geoSeries.shapeMemberPath = "points";
geoSeries.brush = shapeBrush;
geoSeries.outline = "Black";
geoSeries.thickness = 1;
geoSeries.title = shapeTitle;
this.geoMap.series.add(geoSeries);
}