Angular 지리 다각형 지도
Angular 지도 구성 요소에서는 IgxGeographicShapeSeriesComponent
사용하여 지리적 맥락에서 모양 다각형을 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리 시리즈는 지리적 위치로 정의된 국가 또는 지역의 모양을 렌더링하는 데 자주 사용됩니다.
Angular Geographic Polygon Map Example
IgxGeographicShapeSeriesComponent
는 지리 공간 데이터가 폴리라인 대신 다각형으로 렌더링된다는 점을 제외하면 IgxGeographicPolylineSeriesComponent
매우 유사하게 작동합니다.
Data Requirements
지도 컨트롤에 있는 다른 유형의 지리 계열과 마찬가지로 에는 IgxGeographicShapeSeriesComponent
개체 배열에 바인딩할 수 있는 속성이 있습니다 ItemsSource
. 또한 이 개체의 각 데이터 항목에는 지리적 위치를 나타내는 x 및 y 값이 있는 개체 배열 배열을 사용하여 단일/다중 모양을 저장하는 하나의 데이터 열이 있어야 합니다. 그런 다음 이 데이터 열이 속성에 매핑됩니다 shapeMemberPath
. 이 IgxGeographicShapeSeriesComponent
매핑된 데이터 열의 점을 사용하여 지도 컨트롤에 다각형을 그립니다.
Code Snippet
다음 코드는 IgxShapeDataSource
를 사용하여 모양 파일에서 로드된 전 세계 국가의 모양에 IgxGeographicShapeSeriesComponent
바인딩하는 방법을 보여줍니다.
<div className="sampleRoot" >
<igx-geographic-map #map
width="700px"
height="500px"
zoomable="true" >
</igx-geographic-map>
</div>
<ng-template let-series="series" let-item="item" #template>
<div>
<div *ngIf="item.org;then hasOrg; else notOrg" ></div>
<span [style.color]="series.brush">
{{item.name}}
</span>
<br/>
<span>
Population {{item.pop}} M
</span>
</div>
<ng-template #hasOrg>
<span>
Population {{item.pop}} M
</span>
<br />
</ng-template>
<ng-template #notOrg>
<span>
</span>
</ng-template>
</ng-template>
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
@Component({
selector: "app-map-geographic-shape-polygon-series",
styleUrls: ["./map-geographic-shape-polygon-series.component.scss"],
templateUrl: "./map-geographic-shape-polygon-series.component.html"
})
export class MapTypeShapePolygonSeriesComponent implements AfterViewInit {
@ViewChild ("map")
public map: IgxGeographicMapComponent;
@ViewChild("template")
public tooltip: TemplateRef<object>;
public data: any;
constructor() {
}
public ngAfterViewInit(): void {
const sds = new IgxShapeDataSource();
sds.shapefileSource = "assets/Shapes/WorldCountries.shp";
sds.databaseSource = "assets/Shapes/WorldCountries.dbf";
sds.dataBind();
sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
}
public onDataLoaded(sds: IgxShapeDataSource, e: any) {
const shapeRecords = sds.getPointData();
console.log("loaded /Shapes/WorldCountries.shp " + shapeRecords.length);
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 = {
name: record.fieldValues.NAME,
org: record.fieldValues.ALLIANCE,
points: record.points,
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.addSeriesWith(countriesNATO, "rgb(32, 146, 252)", "NATO");
this.addSeriesWith(countriesSCO, "rgb(252, 32, 32)", "SCO");
this.addSeriesWith(countriesARAB, "rgb(14, 194, 14)", "AL");
this.addSeriesWith(countriesOther, "rgb(146, 146, 146)", "Other");
}
public addSeriesWith(shapeData: any[], shapeBrush: string, shapeTitle: string) {
const seriesName = shapeTitle + "series";
const geoSeries = new IgxGeographicShapeSeriesComponent();
geoSeries.dataSource = shapeData;
geoSeries.shapeMemberPath = "points";
geoSeries.brush = shapeBrush;
geoSeries.outline = "Black";
geoSeries.tooltipTemplate = this.tooltip;
geoSeries.thickness = 1;
geoSeries.title = shapeTitle;
this.map.series.add(geoSeries);
}
}
API References
IgxGeographicPolylineSeriesComponent
IgxGeographicShapeSeriesComponent
ItemsSource
shapeMemberPath
IgxShapeDataSource
에서 페이지 보기
GitHub