Angular Binding Shape Files with Geo-spatial Data

    Ignite UI for Angular 맵 컴포넌트인 클래스IgxShapeDataSource는 지리-공간 데이터(점/위치, 폴리라인, 폴리곤)를 형태 파일에서 불러와 객체 모음IgxShapefileRecord으로 변환합니다.

    Angular Binding Shape Files with Geo-spatial Data Example

    다음 표는 셰이프 파일을 로드할 때 클래스의IgxShapeDataSource 속성을 설명합니다.

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

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

    Loading Shapefiles

    다음 코드는 세계 주요 도시의 위치를 포함하는 셰이프 파일을 불러오기 위해 객체의IgxShapeDataSource 인스턴스를 생성합니다. 또한 데이터를 맵 컴포넌트에 바인딩하기 위한 전제 조건으로 이벤트를ImportCompleted 처리하는 방법도 보여줍니다.

    Binding Shapefiles

    지도 구성 요소에서는 지리 시리즈가 도형 파일에서 불러오는 지리-공간 데이터를 표시하는 데 사용됩니다. 모든 유형의 지리적 연계는 객체 배열에 결합할 수 있는 속성을 가지고ItemsSource 있습니다. 이IgxShapeDataSource 배열의 예시로, 객체 목록을IgxShapefileRecord 포함하고 있습니다.

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

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

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

    Code Snippet

    이 코드 예시는 셰이프 파일이 로드되었다IgxShapeDataSource 고 가정합니다. 다음 코드는 map 컴포넌트에서 모든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>

    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);
        }
}

    API References