React 지리 기호 지도

React 지도 구성 요소에서는 IgrGeographicSymbolSeries 사용하여 지리적 맥락에서 점이나 마커를 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리 시리즈는 도시, 공항, 지진 또는 관심 장소와 같은 지리적 위치 모음을 렌더링하는 데 자주 사용됩니다.

React Geographic Symbol Map Example

Data Requirements

지도 구성 요소의 다른 유형의 지리적 계열과 마찬가지로 IgrGeographicSymbolSeries 에는 개체 배열에 바인딩될 수 있는 ItemsSource 속성이 있습니다. 또한 이 개체의 각 데이터 항목에는 지리적 위치(경도 및 위도)를 저장하는 두 개의 숫자 데이터 열이 있어야 합니다. 그런 다음 이러한 데이터 열은 latitudeMemberPath 및 longitudeMemberPath 속성에 매핑됩니다. IgrGeographicSymbolSeries는 이러한 매핑된 데이터 열의 값을 사용하여 지리 지도 구성 요소의 기호 요소를 그립니다.

Code Snippet

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

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { MarkerType } from 'igniteui-react-charts';

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

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

public onMapReferenced(map: IgrGeographicMap) {
    this.geoMap = map;
    this.addSeries(WorldLocations.getCities(), "Gray");
    this.addSeries(WorldLocations.getCapitals(),"rgb(32, 146, 252)");
}

public addSeries(locations: any[], brush: string)
{
    const symbolSeries = new IgrGeographicSymbolSeries ( { name: "symbolSeries" });
    symbolSeries.dataSource = locations;
    symbolSeries.markerType = MarkerType.Circle;
    symbolSeries.latitudeMemberPath = "lat";
    symbolSeries.longitudeMemberPath = "lon";
    symbolSeries.markerBrush  = "White";
    symbolSeries.markerOutline = brush;

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

API References

• IgrGeographicSymbolSeries
• ItemsSource
• latitudeMemberPath
• longitudeMemberPath
• IgrShapeDataSource