React 지리적 버블 지도

React 지도 구성 요소에서는 IgrGeographicProportionalSymbolSeries 사용하여 애플리케이션의 데이터로 지정된 지리적 위치에 거품이나 비례 마커를 그릴 수 있습니다. 이 지도 시리즈는 백화점, 창고 또는 사무실과 같은 특정 비즈니스 사례에서 관심 지점을 강조하는 데 유용할 수 있습니다. 또한 차량 관리 시스템이나 동적 차량 추적을 위한 GPS 시스템에서 이 지도 시리즈를 사용할 수 있습니다.

React Geographic Bubble Map Example

위의 데모는 IgrGeographicProportionalSymbolSeries 계열과 계열의 데이터 바인딩 옵션을 지정하는 방법을 보여줍니다. 자동 마커 선택은 마커 충돌 방지 논리와 함께 구성되며 마커 윤곽선 및 채우기 색상도 지정됩니다.

Configuration Summary

지도 컨트롤의 다른 유형의 분산 계열과 마찬가지로 IgrGeographicProportionalSymbolSeries 계열에는 개체 배열에 바인딩할 수 있는 ItemsSource 속성이 있습니다. 또한 항목 소스의 각 데이터 항목에는 지리적 경도 및 위도 좌표를 저장하고 longitudeMemberPath 및 latitudeMemberPath 속성을 사용하여 이러한 데이터 열을 매핑하는 두 개의 데이터 열이 있어야 합니다. radiusScale 및 radiusMemberPath 설정은 거품의 반경을 구성합니다.

다음 표에는 데이터 바인딩에 사용되는 GeographicHighDensityScatterSeries 계열 속성이 요약되어 있습니다.

재산	유형	설명
`ItemsSource`	어느	항목 소스를 가져오거나 설정합니다.
`longitudeMemberPath`	끈	ItemsSource 속성을 사용하여 할당된 항목의 경도 값 위치를 결정합니다.
`latitudeMemberPath`	끈	ItemsSource 속성을 사용하여 할당된 항목의 위도 값 위치를 결정합니다.
`radiusMemberPath`	끈	계열의 반경 값을 가져오는 데 사용할 경로를 설정합니다.
`radiusScale`	`IgrSizeScale`	현재 거품 계열의 반경 배율 속성을 가져오거나 설정합니다.
`minimumValue`	어느	값 하위 범위를 계산하기 위한 최소값을 구성합니다.
`maximumValue`	어느	값 하위 범위를 계산하기 위한 최대값을 구성합니다.

Code Snippet

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicProportionalSymbolSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { IgrValueBrushScale } from 'igniteui-react-charts';
import { IgrSizeScale } from 'igniteui-react-charts';
import { IgrDataContext } from 'igniteui-react-core';
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.map = map;

    const sizeScale = new IgrSizeScale({});
    sizeScale.minimumValue = 4;
    sizeScale.maximumValue = 60;

    const brushes = [
        "rgba(14, 194, 14, 0.4)",  // semi-transparent green
        "rgba(252, 170, 32, 0.4)", // semi-transparent orange
        "rgba(252, 32, 32, 0.4)",  // semi-transparent red
    ];

    const brushScale = new IgrValueBrushScale({});
    brushScale.brushes = brushes;
    brushScale.minimumValue = 0;
    brushScale.maximumValue = 30;

   const geoSeries = new IgrGeographicProportionalSymbolSeries ( { name: "symbolSeries" });
    geoSeries.dataSource = locations;
    geoSeries.markerType = MarkerType.Circle;
    geoSeries.radiusScale = sizeScale;
    geoSeries.fillScale = brushScale;
    geoSeries.fillMemberPath = "pop";
    geoSeries.radiusMemberPath = "pop";
    geoSeries.latitudeMemberPath = "lat";
    geoSeries.longitudeMemberPath = "lon";
    geoSeries.markerOutline = "rgba(0,0,0,0.3)";

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

React 지리적 버블 지도

React Geographic Bubble Map Example

Configuration Summary

Code Snippet

API References