Angular Binding Shape Files with Geo-spatial Data

    The Ignite UI for Angular map component, the IgxShapeDataSource class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of IgxShapefileRecord objects.

    Angular Binding Shape Files with Geo-spatial Data Example

    The following table explains properties of the IgxShapeDataSource class for loading shape files.

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

    When both source properties are set to non-null values, then the IgxShapeDataSource object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the IgxShapeDataSource is populated with IgxShapefileRecord objects and the ImportCompleted event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files.

    Loading Shapefiles

    The following code creates an instance of the IgxShapeDataSource object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the ImportCompleted event as a prerequisite for binding data to the map component.

    Binding Shapefiles

    In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an ItemsSource property which can be bound to an array of objects. The IgxShapeDataSource is an example such array because it contains a list of IgxShapefileRecord objects.

    The IgxShapefileRecord class provides properties for storing geo-spatial data, listed in the following table.

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

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

    Code Snippet

    This code example assumes that shape files were loaded using the IgxShapeDataSource. The following code binds IgxGeographicPolylineSeriesComponent in the map component to the IgxShapeDataSource and maps the Points property of all IgxShapefileRecord objects.

    <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