지리공간 데이터를 사용한 React 바인딩 셰이프 파일

Ignite UI for React IgrShapeDataSource 클래스는 셰이프 파일에서 지리 공간 데이터(점/위치, 폴리라인, 폴리곤)를 로드하고 이를 IgrShapefileRecord 객체의 컬렉션으로 변환합니다.

지리공간 데이터를 사용한 React 바인딩 셰이프 파일 예제

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrGeographicMapModule } from "@infragistics/igniteui-react-maps";
import { IgrGeographicMap } from "@infragistics/igniteui-react-maps";
import { IgrGeographicPolylineSeries } from "@infragistics/igniteui-react-maps";
import { IgrDataChartInteractivityModule } from "@infragistics/igniteui-react-charts";
import { IgrDataContext } from "@infragistics/igniteui-react-core";
import { IgrShapeDataSource } from "@infragistics/igniteui-react-core";

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

export default class MapBindingShapefilePolylines extends React.Component<any, any> {

    public geoMap: IgrGeographicMap;

    constructor(props: any) {
        super(props);

        this.onMapRef = this.onMapRef.bind(this);
        this.onDataLoaded = this.onDataLoaded.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="container" >
                    <IgrGeographicMap
                        ref={this.onMapRef}
                        width="100%"
                        height="100%"
                        zoomable="true"/>
                </div>
                <div className="overlay-bottom-right overlay-border">Imagery Tiles: @OpenStreetMap</div>
            </div>
        );
    }

    public onMapRef(geoMap: IgrGeographicMap) {
        if (!geoMap) { return; }

        this.geoMap = geoMap;
        this.geoMap.updateZoomWindow({ left: 0.2, top: 0.1, width: 0.6, height: 0.6 });

        // loading a shapefile with geographic polygons
        const sds = new IgrShapeDataSource();
        sds.importCompleted = this.onDataLoaded;
        sds.shapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCableRoutes.shp";
        sds.databaseSource  = "https://static.infragistics.com/xplatform/shapes/WorldCableRoutes.dbf";
        sds.dataBind();
    }

    public onDataLoaded(sds: IgrShapeDataSource, e: any) {
        const shapeRecords = sds.getPointData();
        console.log("loaded WorldCities.shp " + shapeRecords.length);

        const geoPolylines: any[] = [];
        // parsing shapefile data and creating geo-polygons
        for (const record of shapeRecords) {
            // using field/column names from .DBF file
            const route = {
                points: record.points,
                name: record.fieldValues.Name,
                capacity: record.fieldValues.CapacityG,
                distance: record.fieldValues.DistanceKM
            };
            geoPolylines.push(route);
        }

        const geoSeries = new IgrGeographicPolylineSeries( { name: "series" });
        geoSeries.dataSource = geoPolylines;
        geoSeries.shapeMemberPath = "points";
        geoSeries.shapeFilterResolution = 0.0;
        geoSeries.shapeStrokeThickness = 3;
        geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
        geoSeries.tooltipTemplate = this.createTooltip;

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

    public createTooltip(context: any) {
        const dataContext = context.dataContext as IgrDataContext;
        if (!dataContext) return null;

        const series = dataContext.series as any;
        if (!series) return null;

        const dataItem = dataContext.item as any;
        if (!dataItem) return null;

        const capacity = dataItem.capacity + " GB/s";
        const distance = dataItem.distance + " KM";

        return <div>
            {/* <div className="tooltipTitle">{dataItem.name}</div> */}
            <div className="tooltipBox">
                <div className="tooltipRow">
                    <div className="tooltipLbl">Name</div>
                    <div className="tooltipVal">{dataItem.name}</div>
                </div>
                <div className="tooltipRow">
                    <div className="tooltipLbl">Distance</div>
                    <div className="tooltipVal">{distance}</div>
                </div>
                <div className="tooltipRow">
                    <div className="tooltipLbl">Capacity</div>
                    <div className="tooltipVal">{capacity}</div>
                </div>
            </div>
        </div>
    }

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MapBindingShapefilePolylines/>);
tsxコピー

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

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

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

셰이프파일 로드

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

import { IgrShapeDataSource } from 'igniteui-react-core';
// ...

const sds = new IgrShapeDataSource();
sds.importCompleted = this.onShapePolylinesLoaded;
sds.shapefileSource = url + "/shapes/WorldCableRoutes.shp";
sds.databaseSource  = url + "/shapes/WorldCableRoutes.dbf";
sds.dataBind();
ts

Shapefile 바인딩

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

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

재산	설명
Points	모양 파일(.shp)에서 로드된 하나의 지리 공간 모양의 모든 점을 포함합니다. 예를 들어, 모양 파일의 일본 국가는 포인트 개체 목록으로 표시됩니다. 첫 번째 점 목록은 홋카이도 섬의 모양을 설명합니다. 두 번째 점 목록은 혼슈 섬의 모양을 설명합니다. 세 번째 점 목록은 규슈 섬의 모양을 설명합니다. The fourth list of points describes shape of Shikoku island

| | '필드' |열 이름으로 입력된 모양 데이터베이스 파일(.dbf)의 데이터 행을 포함합니다. 예를 들어 인구, 면적, 수도명 등을 포함하는 일본의 군에 관한 데이터|

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

코드 조각

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

import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
// ...

public onShapePolylinesLoaded(sds: IgrShapeDataSource, e: any) {
    const geoPolylines: any[] = [];
    for (const record of sds.getPointData()) {
            // using field/column names from .DBF file
            const route = {
                points: record.points,
                name: record.fieldValues["Name"],
                capacity: record.fieldValues["CapacityG"],
                distance: record.fieldValues["DistanceKM"],
                isOverLand: record.fieldValues["OverLand"] === 0,
                isActive: record.fieldValues["NotLive"] !== 0,
                service: record.fieldValues["InService"]
            };
            geoPolylines.push(route);
        }

    const geoSeries = new IgrGeographicPolylineSeries( { name: "series" });
    geoSeries.dataSource = geoPolylines;
    geoSeries.shapeMemberPath = "points";
    geoSeries.shapeFilterResolution = 0.0;
    geoSeries.shapeStrokeThickness = 3;
    geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
    geoSeries.tooltipTemplate = this.createTooltip;
    this.geoMap.series.add(symbolSeries);
}
ts

API 참조

• Fields
• IgrGeographicPolylineSeries
• ImportCompleted
• ItemsSource
• Points
• IgrShapeDataSource