React 지리적 폴리라인 지도

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

React Geographic Polyline Map Example

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

Data Requirements

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

Code Snippet

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

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { IgrShapeDataSource } from 'igniteui-react-core';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
// ...

public render() {
    return (
    <IgrGeographicMap
        ref={this.onMapReferenced}
        width="600px"
        height="600px"
        zoomable="true" />
    );
}

public onMapReferenced(map: IgrGeographicMap) {
    this.geoMap = map;

    const sds = new IgrShapeDataSource();
    sds.importCompleted = this.onDataLoaded;
    sds.shapefileSource = "/Shapes/AmericanRoads.shp";
    sds.databaseSource  = "/Shapes/AmericanRoads.dbf";
    sds.dataBind();
}

public onDataLoaded(sds: IgrShapeDataSource, e: any) {

    const roadsUSA: any[] = [];
    const roadsMEX: any[] = [];
    const roadsCAN: any[] = [];
    // filtering records of loaded shapefile
    for (const record of sds.getPointData()) {
        // 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.addSeries(roadsCAN, "rgba(252, 32, 32, 0.9)");
    this.addSeries(roadsUSA, "rgba(3, 121, 231, 0.9)");
    this.addSeries(roadsMEX, "rgba(14, 194, 14, 0.9)");
}

public addSeries(shapeData: any[], shapeBrush: string)
{
    const lineSeries = new IgrGeographicPolylineSeries ( { name: "lineSeries" });
    lineSeries.dataSource = shapeData;
    lineSeries.shapeMemberPath = "points";
    lineSeries.shapeFilterResolution = 2.0;
    lineSeries.shapeStrokeThickness = 2;
    lineSeries.shapeStroke = shapeBrush;

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

React 지리적 폴리라인 지도

React Geographic Polyline Map Example

Data Requirements

Code Snippet

API References