Angular 지리 폴리라인 지도
Angular 지도 구성 요소에서는 IgxGeographicPolylineSeriesComponent
사용하여 지리적 맥락에서 폴리라인을 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리 시리즈는 도시나 공항과 같은 지리적 위치 간의 도로나 연결을 렌더링하는 데 자주 사용됩니다.
Angular Geographic Polyline Map Example
IgxGeographicPolylineSeriesComponent
는 지리 공간 데이터가 다각형 대신 폴리라인으로 렌더링된다는 점을 제외하면 IgxGeographicShapeSeriesComponent
매우 유사하게 작동합니다.
Data Requirements
컨트롤 IgxGeographicPolylineSeriesComponent
에 있는 다른 유형의 지리 계열과 마찬가지로 에는 ItemsSource
개체 배열에 바인딩할 수 있는 속성이 있습니다. 또한 이 개체의 각 데이터 항목에는 지리적 위치를 나타내는 x 및 y 값이 있는 개체 배열 배열을 사용하여 단일/다중 모양을 저장하는 하나의 데이터 열이 있어야 합니다. 그런 다음 이 데이터 열이 속성에 매핑됩니다 shapeMemberPath
. IgxGeographicPolylineSeriesComponent
이 매핑된 데이터 열의 점을 사용하여 컨트롤에 다각형을 그립니다.
Code Snippet
다음 코드는 IgxShapeDataSource
를 사용하여 모양 파일에서 로드된 도시 위치에 IgxGeographicPolylineSeriesComponent
를 바인딩하는 방법을 보여줍니다.
<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>
<span>
{{item.country}} {{item.type}}
</span>
<br />
<span>
Length: {{item.length}} miles
</span>
</div>
</ng-template>
import { AfterViewInit, Component, EmbeddedViewRef, TemplateRef, ViewChild} from "@angular/core";
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxIgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
@Component({
selector: "app-map-geographic-shape-polyline-series",
styleUrls: ["./map-geographic-shape-polyline-series.component.scss"],
templateUrl: "./map-geographic-shape-polyline-series.component.html"
})
export class MapTypeShapePolylineSeriesComponent implements AfterViewInit {
@ViewChild ("map")
public map: IgxGeographicMapComponent;
@ViewChild("template")
public tooltip: TemplateRef<object>;
constructor() {
}
public ngAfterViewInit(): void {
this.map.windowRect = { left: 0.195, top: 0.325, width: 0.2, height: 0.1 };
const sds = new IgxShapeDataSource();
sds.shapefileSource = "/assets/Shapes/AmericanRoads.shp";
sds.databaseSource = "/assets/Shapes/AmericanRoads.dbf";
sds.dataBind();
sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
}
public onDataLoaded(sds: IgxShapeDataSource, e: any) {
const shapeRecords = sds.getPointData();
console.log("loaded /Shapes/AmericanRoads.shp " + shapeRecords.length);
const roadsUSA: any[] = [];
const roadsMEX: any[] = [];
const roadsCAN: any[] = [];
// filtering records of loaded shapefile
for (const record of shapeRecords) {
// reading field values loaded from DBF file
const type = record.fieldValues.RoadType;
const road = {
country: record.fieldValues.Country,
length: record.fieldValues.RoadLength / 10,
points: record.points,
type: type === 1 ? "Highway" : "Road"
};
// grouping road items by country names
if (type === 1 || type === 2) {
if (road.country === "USA") {
roadsUSA.push(road);
} else if (road.country === "MEX") {
roadsMEX.push(road);
} else if (road.country === "CAN") {
roadsCAN.push(road);
}
}
}
// creating polyline series for roads of each country
this.addSeriesWith(roadsCAN, "rgba(252, 32, 32, 0.9)");
this.addSeriesWith(roadsUSA, "rgba(3, 121, 231, 0.9)");
this.addSeriesWith(roadsMEX, "rgba(14, 194, 14, 0.9)");
}
public addSeriesWith(shapeData: any[], shapeBrush: string) {
const lineSeries = new IgxGeographicPolylineSeriesComponent ();
lineSeries.dataSource = shapeData;
lineSeries.shapeMemberPath = "points";
lineSeries.shapeFilterResolution = 2.0;
lineSeries.shapeStrokeThickness = 2;
lineSeries.shapeStroke = shapeBrush;
lineSeries.tooltipTemplate = this.tooltip;
this.map.series.add(lineSeries);
}
}
API References
IgxGeographicPolylineSeriesComponent
IgxGeographicShapeSeriesComponent
ItemsSource
IgxShapeDataSource
에서 페이지 보기
GitHub