Web Components 지리적 폴리라인 지도

Web Components 지도 구성 요소에서는 IgcGeographicPolylineSeriesComponent 사용하여 지리적 컨텍스트에서 폴리라인을 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리 시리즈는 도시나 공항과 같은 지리적 위치 간의 도로나 연결을 렌더링하는 데 자주 사용됩니다.

Web Components Geographic Polyline Map Example

​IgcGeographicPolylineSeriesComponent는 지리 공간 데이터가 다각형 대신 폴리라인으로 렌더링된다는 점을 제외하면 IgcGeographicShapeSeriesComponent 매우 유사하게 작동합니다.

Data Requirements

컨트롤 IgcGeographicPolylineSeriesComponent에 있는 다른 유형의 지리 계열과 마찬가지로 에는 ItemsSource 개체 배열에 바인딩할 수 있는 속성이 있습니다. 또한 이 개체의 각 데이터 항목에는 지리적 위치를 나타내는 x 및 y 값이 있는 개체 배열 배열을 사용하여 단일/다중 모양을 저장하는 하나의 데이터 열이 있어야 합니다. 그런 다음 이 데이터 열이 속성에 매핑됩니다 shapeMemberPath. IgcGeographicPolylineSeriesComponent이 매핑된 데이터 열의 점을 사용하여 컨트롤에 다각형을 그립니다.

Code Snippet

다음 코드는 IgcShapeDataSource를 사용하여 모양 파일에서 로드된 도시 위치에 IgcGeographicPolylineSeriesComponent를 바인딩하는 방법을 보여줍니다.

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

</igc-geographic-map>

import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
//...
connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
    // loading a shapefile with geographic shapes
    const sds = new IgcShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = "../shapes/AmericanRoads.shp";
    sds.databaseSource = "../shapes/AmericanRoads.dbf";
    sds.dataBind();
}

onDataLoaded(sds: IgcShapeDataSource, e: any) {
    const shapeRecords = sds.getPointData();
    console.log("loaded AmericanRoads.shp " + shapeRecords.length);
    const roadsUSA: any[] = [];
    const roadsMEX: any[] = [];
    const roadsCAN: any[] = [];
    // filtering records of loaded shapefile
    for (const record of shapeRecords) {
        // reading field values loaded from DBF file
        const type = record.fieldValues.RoadType;
        const road = {
            country: record.fieldValues.Country,
            length: record.fieldValues.RoadLength / 10,
            points: record.points,
            type: type === 1 ? "Highway" : "Road",
        };
        // grouping road items by country names
        if (type === 1 || type === 2) {
            if (road.country === "USA") {
                roadsUSA.push(road);
            } else if (road.country === "MEX") {
                roadsMEX.push(road);
            } else if (road.country === "CAN") {
                roadsCAN.push(road);
            }
        }
    }
    // creating polyline series for roads of each country
    this.addSeriesWith(roadsCAN, "rgba(252, 32, 32, 0.9)");
    this.addSeriesWith(roadsUSA, "rgba(3, 121, 231, 0.9)");
    this.addSeriesWith(roadsMEX, "rgba(14, 194, 14, 0.9)");
}
public addSeriesWith(shapeData: any[], shapeBrush: string) {
    const lineSeries = new IgcGeographicPolylineSeriesComponent();
    lineSeries.dataSource = shapeData;
    lineSeries.shapeMemberPath = "points";
    lineSeries.shapeFilterResolution = 2.0;
    lineSeries.shapeStrokeThickness = 2;
    lineSeries.shapeStroke = shapeBrush;

    this.geoMap.series.add(lineSeries);
}

API References

• IgcGeographicPolylineSeriesComponent
• IgcGeographicShapeSeriesComponent
• ItemsSource
• IgcShapeDataSource