React 지리적 다각형 지도

React 지도 구성 요소에서는 IgrGeographicShapeSeries 사용하여 지리적 맥락에서 모양 다각형을 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리 시리즈는 지리적 위치로 정의된 국가 또는 지역의 모양을 렌더링하는 데 자주 사용됩니다.

React Geographic Polygon Map Example

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

Data Requirements

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

Code Snippet

다음 코드는 IgrShapeDataSource를 사용하여 모양 파일에서 로드된 전 세계 국가의 모양에 IgrGeographicShapeSeries 바인딩하는 방법을 보여줍니다.

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicShapeSeries } 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/WorldCountries.shp";
    sds.databaseSource  = "/shapes/WorldCountries.dbf";
    sds.dataBind();
}

public onDataLoaded(sds: IgrShapeDataSource, e: any) {
    const countriesNATO: any[] = [];
    const countriesSCO: any[] = [];
    const countriesARAB: any[] = [];
    const countriesOther: any[] = [];

    for (const record of sds.getPointData()) {
        // using field/column names from .DBF file
        const country = {
            points: record.points,
            name: record.fieldValues.Name,
            org: record.fieldValues.Alliance,
            pop: record.fieldValues.Population
        };
        const group = record.fieldValues.Alliance;
        if (group === "NATO") {
            countriesNATO.push(country);
        } else if (group === "SCO") {
            countriesSCO.push(country);
        } else if (group === "ARAB LEAGUE") {
            countriesARAB.push(country);
        } else {
            countriesOther.push(country);
        }
    }
    this.createSeries(countriesNATO, "rgb(32, 146, 252)", "NATO");
    this.createSeries(countriesSCO, "rgb(252, 32, 32)", "SCO");
    this.createSeries(countriesARAB, "rgb(14, 194, 14)", "AL");
    this.createSeries(countriesOther, "rgb(146, 146, 146)", "Other");
}

public createSeries(shapeData: any[], shapeBrush: string, shapeTitle: string)
{
    const seriesName = shapeTitle + "series";
    const geoSeries = new IgrGeographicShapeSeries( { name: seriesName });
    geoSeries.dataSource = shapeData;
    geoSeries.shapeMemberPath = "points";
    geoSeries.brush = shapeBrush;
    geoSeries.outline = "Black";
    geoSeries.thickness = 1;
    geoSeries.title = shapeTitle;
    this.geoMap.series.add(geoSeries);
}

React 지리적 다각형 지도

React Geographic Polygon Map Example

Data Requirements

Code Snippet

API References