React 지리학적 고밀도 지도

React 맵 구성 요소에서는 IgrGeographicHighDensityScatterSeries 사용하여 매우 짧은 로드 시간이 필요한 수백에서 수백만 개의 데이터 포인트에 이르는 분산형 데이터를 바인딩하고 표시할 수 있습니다.

React Geographic High Density Map Example

위의 데모는 호주의 인구 밀도를 나타내는 수백 또는 수천 개의 데이터 포인트에 바인딩된 지도 구성 요소의 IgrGeographicHighDensityScatterSeries 시리즈를 보여줍니다. 빨간색 픽셀과 느슨하게 분산된 데이터 포인트가 별개의 파란색 픽셀로 합쳐진 것으로 표시되는 밀도가 높은 데이터 포인트가 있는 지도 플롯 영역입니다.

데이터 포인트가 너무 많기 때문에 시리즈는 분산형 데이터를 전체 크기 마커가 아닌 작은 점으로 표시하고 데이터 포인트 클러스터를 나타내는 더 높은 색상 밀도를 사용하여 가장 많은 데이터가 있는 영역을 표시합니다.

Data Requirements

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

Data Binding

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

재산	유형	설명
ItemsSource	어느	항목 소스를 가져오거나 설정합니다.
longitudeMemberPath	끈	ItemsSource 속성을 사용하여 할당된 항목의 경도 값 위치를 결정합니다.
latitudeMemberPath	끈	ItemsSource 속성을 사용하여 할당된 항목의 위도 값 위치를 결정합니다.

Heat Color Scale

선택 기능인 Heat Color Scale은 시리즈 내의 색상 패턴을 결정합니다. 다음 표에는 색상 스케일을 결정하는 데 사용되는 속성이 요약되어 있습니다.

재산	유형	설명
heatMinimum	더블	색상 스케일의 최소 끝을 나타내는 이중 값을 정의합니다.
heatMaximum	더블	색상 스케일의 최대 끝을 나타내는 이중 값을 정의합니다.
heatMinimumColor	색상	색상 스케일의 하단에 사용되는 포인트 밀도 색상을 정의합니다.
heatMaximumColor	색상	색상 스케일의 상단에 사용되는 포인트 밀도 색상을 정의합니다.

Code Example

다음 코드는 IgrGeographicHighDensityScatterSeries의 heatMinimumColor 및 heatMaximumColor 속성을 설정하는 방법을 보여줍니다.

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicHighDensityScatterSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } 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;
}

public componentDidMount() {
    // fetching geographic locations from public folder or URL
    fetch("Data/AusPlaces.json")
        .then((response) => response.json())
        .then(data => this.onDataLoaded(data));
}

public onDataLoaded(geoLocations: any[]) {

    const geoSeries = new IgrGeographicHighDensityScatterSeries( { name: "hdSeries" });
    geoSeries.dataSource = geoLocations;
    geoSeries.longitudeMemberPath = "x";
    geoSeries.latitudeMemberPath = "y";
    geoSeries.heatMaximumColor = "Red";
    geoSeries.heatMinimumColor = "Black";
    geoSeries.heatMinimum = 0;
    geoSeries.heatMaximum = 5;
    geoSeries.pointExtent = 1;
    geoSeries.mouseOverEnabled = true;

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

API References

• IgrGeographicHighDensityScatterSeries
• IgrGeographicHighDensityScatterSeries
• heatMaximumColor
• heatMinimumColor
• ItemsSource
• latitudeMemberPath
• longitudeMemberPath