Angular Binding Shape Files with Geo-spatial Data

    Ignite UI for Angular map 구성 요소인 이 클래스는 IgxShapeDataSource 모양 파일에서 지리 공간 데이터(포인트/위치, 폴리라인, 폴리곤)를 로드하고 개체 컬렉션 IgxShapefileRecord으로 변환합니다.

    지리공간 데이터가 포함된 Angular 바인딩 셰이프 파일 예제

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    다음 표에서는 모양 파일을 로드하기 위한 IgxShapeDataSource 클래스의 속성을 설명합니다.

    재산 유형 설명
    shapefileSource 끈 지리 공간 데이터 항목이 포함된 모양 파일(.shp)에 Uri를 지정합니다.
    databaseSource 끈 지리 공간 데이터 항목에 대한 데이터 테이블이 포함된 모양 데이터베이스 파일(.dbf)에 Uri를 지정합니다.

    두 소스 속성이 모두 null이 아닌 값으로 설정된 경우 IgxShapeDataSource 개체의 ImportAsync 메서드가 호출되어 그 대가로 모양 파일을 가져오고 읽고 마지막으로 변환을 수행합니다. 이 작업이 완료되면 IgxShapeDataSource가 IgxShapefileRecord 객체로 채워지고 모양 파일에서 지리 공간 데이터를 로드하고 변환하는 프로세스가 완료되었음을 알리기 위해 ImportCompleted 이벤트가 발생합니다.

    셰이프파일 로드

    다음 코드는 전 세계 주요 도시의 위치가 포함된 모양 파일을 로드하기 위해 IgxShapeDataSource 개체의 인스턴스를 만듭니다. 또한 데이터를 지도 구성 요소에 바인딩하기 위한 전제 조건으로 ImportCompleted 이벤트를 처리하는 방법도 보여줍니다.

    Shapefile 바인딩

    지도 구성 요소에서 Geographic Series는 모양 파일에서 로드된 지리 공간 데이터를 표시하는 데 사용됩니다. 모든 유형의 Geographic Series에는 개체 배열에 바인딩될 수 있는 ItemsSource 속성이 있습니다. IgxShapeDataSource는 IgxShapefileRecord 객체 목록을 포함하므로 이러한 배열의 예입니다.

    ​IgxShapefileRecord 클래스는 다음 표에 나열된 지리 공간 데이터를 저장하기 위한 속성을 제공합니다.

    재산 설명
    Points 모양 파일(.shp)에서 로드된 하나의 지리 공간 모양의 모든 점을 포함합니다. 예를 들어, 모양 파일의 일본 국가는 포인트 개체 목록으로 표시됩니다.
    • 첫 번째 점 목록은 홋카이도 섬의 모양을 설명합니다.
    • 두 번째 점 목록은 혼슈 섬의 모양을 설명합니다.
    • 세 번째 점 목록은 규슈 섬의 모양을 설명합니다.
    • The fourth list of points describes shape of Shikoku island
    | | '필드' |열 이름으로 입력된 모양 데이터베이스 파일(.dbf)의 데이터 행을 포함합니다. 예를 들어 인구, 면적, 수도명 등을 포함하는 일본의 군에 관한 데이터|

    이 데이터 구조는 적절한 데이터 열이 매핑되어 있는 한 대부분의 Geographic Series에서 사용하기에 적합합니다.

    코드 조각

    이 코드 예제에서는 모양 파일이 다음을 사용하여 로드되었다고 가정합니다. IgxShapeDataSource. 다음 코드는 바인드됩니다. IgxGeographicPolylineSeriesComponent 지도 구성요소에서 IgxShapeDataSource 그리고 매핑 Points 모두의 재산 IgxShapefileRecord 사물.

    <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>
                Airline: {{item.name}}
                </span>
                <br />
                <span>
                Length: {{item.distance}} miles
                </span>
            </div>
</ng-template>
html
    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';

@Component({
  selector: "app-map-binding-shape-files",
  styleUrls: ["./map-binding-shape-files.component.scss"],
  templateUrl: "./map-binding-shape-files.component.html"
})
export class MapBindingShapefilePolylinesComponent implements AfterViewInit {

    @ViewChild ("map")
    public map: IgxGeographicMapComponent;

    @ViewChild("template")
    public tooltipTemplate: TemplateRef<object>;
    constructor() { }

    public ngAfterViewInit() {
    // loading a shapefile with geographic polygons
    const sds = new IgxShapeDataSource();
    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
    sds.shapefileSource = "assets/Shapes/WorldCableRoutes.shp";
    sds.databaseSource  = "assets/Shapes/WorldCableRoutes.dbf";
    sds.dataBind();
    }
    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
        const shapeRecords = sds.getPointData();
        const geoPolylines: any[] = [];
        // parsing shapefile data and creating geo-polygons
        for (const record of shapeRecords) {
            // 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);
        }

        const geoSeries = new IgxGeographicPolylineSeriesComponent();
        geoSeries.dataSource = geoPolylines;
        geoSeries.shapeMemberPath = "points";
        geoSeries.shapeFilterResolution = 0.0;
        geoSeries.shapeStrokeThickness = 3;
        geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
        geoSeries.tooltipTemplate = this.tooltipTemplate;

        this.map.series.add(geoSeries);
        }
}
ts
    App Builder | CTA 배너

    API 참조