Web Components Shape 파일을 지리 공간 데이터와 바인딩

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

    Web Components Shape Files with Geo-spatial Data 예제

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

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

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

    셰이프파일 로드

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

    Ignite UI for Web Components | CTA 배너

    Shapefile 바인딩

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

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

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

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

    코드 조각

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

    <igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>
html
    connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;

    const sds = new IgcShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = "../shapes/WorldCities.shp";
    sds.databaseSource  = "../shapes/WorldCities.dbf";
    sds.dataBind();
}

onDataLoaded(sds: IgcShapeDataSource, e: any) {
    const shapeRecords = sds.getPointData();
    console.log("loaded WorldCities.shp " + shapeRecords.length);
    const geoLocations: any[] = [];
    // parsing shapefile data and creating geo-locations
    for (const record of shapeRecords) {
        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 geoSeries = new IgcGeographicSymbolSeriesComponent();
    geoSeries.dataSource = geoLocations;
    geoSeries.markerType = MarkerType.Circle;
    geoSeries.latitudeMemberPath  = "latitude";
    geoSeries.longitudeMemberPath = "longitude";
    geoSeries.markerBrush = "LightGray";
    geoSeries.markerOutline = "Black";
    geoSeries.tooltipTemplate = this.createTooltip;

    this.geoMap.series.add(geoSeries);
}
ts

    API 참조