Angular Binding and Overlaying Multiple Shape Files
Ignite UI for Angular에서 여러 지리적 시리즈 객체를 추가하여 몇 개의 셰이프파일을 지리 공간 데이터로 오버레이할 수 있습니다. 예를 들어, 항구의 지리적 위치를 플로팅하는 IgxGeographicSymbolSeriesComponent
, 항구 간 경로를 플로팅하는 IgxGeographicPolylineSeriesComponent
, 국가의 모양을 플로팅하는 IgxGeographicShapeSeriesComponent
있습니다.
Angular 바인딩 및 여러 셰이프 파일 오버레이 예제
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
이 항목에서는 지도 구성 요소에 여러 지리적 계열을 표시하는 방법을 단계별로 안내합니다. 다음을 사용하여 모양 파일에서 로드된 지리 공간 데이터를 따르는 모든 지리 계열 플롯 IgxShapeDataSource
수업. 다음을 참조하세요. 모양 파일 바인딩 자세한 내용은 주제를 참조하세요. IgxShapeDataSource
물체.
IgxGeographicSymbolSeriesComponent
– 주요 도시의 위치를 표시합니다.IgxGeographicPolylineSeriesComponent
– 주요 포트 간의 경로를 표시합니다.IgxGeographicShapeSeriesComponent
– 세계 국가의 모양을 표시합니다.
위의 지리적 계열이나 다른 조합을 사용하여 원하는 데이터를 표시할 수 있습니다.
구성요소 가져오기
먼저 필수 구성 요소와 모듈을 가져옵니다.
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource } from 'igniteui-angular-core';
ts
시리즈 만들기
다음으로, 나중에 다른 유형의 쉐이프파일을 로드할 몇 가지 지리적 시리즈가 포함된 지도를 만들어야 합니다.
<div className="sampleRoot">
<div className="map" >
<igx-geographic-map
#map
width="700px"
height="500px"
zoomable="true" >
<igx-geographic-shape-series #shapeSeries
name="polygonSeries"
shapeMemberPath="points"
shapeFill="rgb(150, 150, 150)"
shapeStroke="Black"
shapeStrokeThickness={1.0} >
</igx-geographic-shape-series>
<igx-geographic-polyline-series #polylineSeries
[tooltipTemplate]="polylineTooltipTemplate"
name="polylineSeries"
shapeMemberPath="points"
shapeStroke="rgba(147, 15, 180, 0.5)"
thickness={3.0} >
</igx-geographic-polyline-series>
<igx-geographic-symbol-series #symbolSeries
name="symbolSeries"
longitudeMemberPath="longitude"
latitudeMemberPath="latitude"
markerType="Circle"
markerOutline="rgb(2, 102, 196)"
markerBrush="White" >
</igx-geographic-symbol-series>
</igx-geographic-map>
</div>
</div>
<ng-template let-series="series" let-item="item" #polylineTooltipTemplate>
<div>
<span>{{item.capacity}}</span><br />
<span>Distance: {{item.distance}}</span>
</div>
</ng-template>
<ng-template let-series="series" let-item="item" #shapeTooltipTemplate>
<div>
<span>{{item.name}}</span><br />
<span>Population: {{item.population}}</span>
</div>
</ng-template>
<ng-template let-series="series" let-item="item" #pointTooltipTemplate>
<div>
<span [style.color]="series.brush">City: {{item.city}}</span>
</div>
</ng-template>
html
셰이프파일 로드
다음으로 페이지 생성자에서 지리 지도 구성 요소에 표시하려는 각 모양 파일에 대해 IgxShapeDataSource
추가합니다.
const sdsPolygons = new IgxShapeDataSource();
sdsPolygons.importCompleted = this.onPolygonsLoaded;
sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
sdsPolygons.databaseSource = url + "/shapes/WorldCountries.dbf";
sdsPolygons.dataBind();
const sdsPolylines = new IgxShapeDataSource();
sdsPolylines.importCompleted = this.onPolylinesLoaded;
sdsPolylines.shapefileSource = url + "/shapes/WorldConnections.shp";
sdsPolylines.databaseSource = url + "/shapes/WorldConnections.dbf";
sdsPolylines.dataBind();
const sdsLocations = new IgxShapeDataSource();
sdsLocations.importCompleted = this.onPointsLoaded;
sdsLocations.shapefileSource = url + "/Shapes/WorldCities.shp";
sdsLocations.databaseSource = url + "/Shapes/WorldCities.dbf";
sdsLocations.dataBind();
ts
다각형 처리
IgxShapeDataSource
에 로드된 세계 각국의 도형 데이터를 처리하여 IgxGeographicShapeSeriesComponent
객체에 할당합니다.
import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource } from 'igniteui-angular-core';
// ...
public onPolygonsLoaded(sds: IgxShapeDataSource, 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 IgxGeographicShapeSeries;
shapeSeries.dataSource = geoPolygons;
}
ts
폴리라인 처리
IgxShapeDataSource
에 로드된 형상 데이터를 주요 도시 간 통신 경로로 처리하고 IgxGeographicPolylineSeriesComponent
객체에 할당합니다.
import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource } from 'igniteui-angular-core';
// ...
public onPolylinesLoaded(sds: IgxShapeDataSource, 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 IgxGeographicPolylineSeries;
lineSeries.dataSource = geoPolylines;
}
ts
처리 포인트
IgxShapeDataSource
에 로드된 도형 데이터를 주요 도시의 위치와 함께 처리하여 IgxGeographicSymbolSeriesComponent
개체에 할당합니다.
import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
import { IgxShapeDataSource } from 'igniteui-angular-core';
// ...
public onPointsLoaded(sds: IgxShapeDataSource, 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 IgxGeographicSymbolSeries;
symbolSeries.dataSource = geoLocations;
}
ts
지도 배경
또한 모양 파일이 애플리케이션에 충분한 지리적 컨텍스트(예: 국가 모양)를 제공한 경우 지도 배경 콘텐츠에서 지리적 이미지를 숨길 수도 있습니다.
public geoMap: IgxGeographicMapComponent;
// ...
this.geoMap.backgroundContent = {};
ts
요약
귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사할 수 있습니다.
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps";
import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
@Component({
selector: "app-map-binding-multiple-shapes-files",
styleUrls: ["./map-binding-multiple-shapes-files.component.scss"],
templateUrl: "./map-binding-multiple-shapes-files.component.html"
})
export class MapBindingMultipleShapesComponent implements AfterViewInit {
@ViewChild ("map")
public map: IgxGeographicMapComponent;
@ViewChild ("shapeSeries")
public shapeSeries: IgxGeographicShapeSeriesComponent;
@ViewChild ("polylineSeries")
public polylineSeries: IgxGeographicPolylineSeriesComponent;
@ViewChild ("symbolSeries")
public symbolSeries: IgxGeographicSymbolSeriesComponent;
@ViewChild("polylineTooltipTemplate")
public polylineTooltipTemplate: TemplateRef<object>;
@ViewChild("shapeTooltipTemplate")
public shapeTooltipTemplate: TemplateRef<object>;
@ViewChild("pointTooltipTemplate")
public pointTooltipTemplate: TemplateRef<object>;
constructor() {
}
public ngAfterViewInit(): void {
this.map.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
// loading a shapefile with geographic polygons
const sdsPolygons = new IgxShapeDataSource();
sdsPolygons.importCompleted.subscribe(() => this.onPolygonsLoaded(sdsPolygons, ""));
sdsPolygons.shapefileSource = "assets/Shapes/WorldCountries.shp";
sdsPolygons.databaseSource = "assets/Shapes/WorldCountries.dbf";
sdsPolygons.dataBind();
// loading a shapefile with geographic polylines at runtime.
const sdsPolylines = new IgxShapeDataSource();
sdsPolylines.shapefileSource = "assets/Shapes/WorldCableRoutes.shp";
sdsPolylines.databaseSource = "assets/Shapes/WorldCableRoutes.dbf";
sdsPolylines.dataBind();
sdsPolylines.importCompleted.subscribe(() => this.onPolylinesLoaded(sdsPolylines, ""));
// loading a shapefile with geographic points
const sdsPoints = new IgxShapeDataSource();
sdsPoints.importCompleted.subscribe(() => this.onPointsLoaded(sdsPoints, ""));
sdsPoints.shapefileSource = "assets/Shapes/WorldCities.shp";
sdsPoints.databaseSource = "assets/Shapes/WorldCities.dbf";
sdsPoints.dataBind();
}
public onPointsLoaded(sds: IgxShapeDataSource, 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 = {
city: record.fieldValues["NAME"],
latitude: record.points[0][0].y,
longitude: record.points[0][0].x,
population: pop
};
geoLocations.push(location);
}
}
this.symbolSeries.dataSource = geoLocations;
this.symbolSeries.tooltipTemplate = this.pointTooltipTemplate;
}
public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) {
const geoPolylines: any[] = [];
// parsing shapefile data and creating geo-polygons
for (const record of sds.getPointData()) {
// using field/column names from .DBF file
const route = {
capacity: record.fieldValues["CapacityG"],
distance: record.fieldValues["DistanceKM"],
isActive: record.fieldValues["NotLive"] !== 0,
isOverLand: record.fieldValues["OverLand"] === 0,
name: record.fieldValues["Name"],
points: record.points,
service: record.fieldValues["InService"]
};
geoPolylines.push(route);
}
this.polylineSeries.dataSource = geoPolylines;
this.polylineSeries.shapeMemberPath = "points";
this.polylineSeries.shapeFilterResolution = 2.0;
this.polylineSeries.shapeStrokeThickness = 2;
this.polylineSeries.shapeStroke = "rgba(252, 32, 32, 0.9)";
this.polylineSeries.tooltipTemplate = this.polylineTooltipTemplate;
}
public onPolygonsLoaded(sds: IgxShapeDataSource, 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 = {
gdp: record.fieldValues["GDP"],
name: record.fieldValues["NAME"],
points: record.points,
population: record.fieldValues["POPULATION"]
};
geoPolygons.push(country);
});
this.shapeSeries.dataSource = geoPolygons;
this.shapeSeries.tooltipTemplate = this.shapeTooltipTemplate;
}
}
ts
API 참조
IgxGeographicPolylineSeriesComponent
IgxGeographicShapeSeriesComponent
IgxGeographicSymbolSeriesComponent
IgxShapeDataSource