React 지리적 영역지도

React 지도 구성 요소에서는 IgrGeographicScatterAreaSeries 사용하여 각 지점에 숫자 값이 할당된 경도 및 위도 데이터의 삼각측량을 기반으로 지리적 맥락에서 색상이 지정된 표면을 그릴 수 있습니다. 이러한 유형의 지리 계열은 기상 온도, 강수량, 인구 분포, 대기 오염 등과 같은 지리적 위치로 정의된 분산된 데이터를 렌더링하는 데 유용합니다.

React Geographic Area Map Example

​IgrGeographicScatterAreaSeries는 동일한 값을 가진 데이터 포인트를 연결하는 등고선 대신 데이터를 보간되고 색상이 지정된 표면으로 표시한다는 점을 제외하면 IgrGeographicContourLineSeries와 매우 유사하게 작동합니다.

Data Requirements

지도 구성 요소의 다른 유형의 지리 계열과 유사하게 IgrGeographicScatterAreaSeries 에는 객체 배열에 바인딩될 수 있는 ItemsSource 속성이 있습니다. 또한 항목 원본의 각 항목에는 세 개의 데이터 열이 있어야 합니다. 두 개는 지리적 경도 및 위도 좌표를 저장하고 한 개는 지리적 위치와 연결된 값을 저장합니다. 지리 계열의 longitudeMemberPath, latitudeMemberPath 및 colorMemberPath 속성은 이러한 데이터 열을 식별합니다. IgrGeographicScatterAreaSeries는 trianglesSource 소스 속성에 삼각 분할이 설정되지 않은 경우 ItemsSource의 항목에 대해 기본 제공 데이터 삼각 측량을 자동으로 수행합니다. 그러나 삼각분할 계산은 시간이 많이 걸리는 프로세스일 수 있으므로 이 속성에 대해 TriangulationSource를 지정하면 특히 많은 수의 데이터 항목이 있는 경우 런타임 성능이 더 좋아집니다.

Data Binding

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

속성 이름	부동산 유형	설명
ItemsSource	어느	삼각측량을 수행할 데이터 항목의 소스입니다.trianglesSource 속성은 삼각측량 데이터를 제공하지 않습니다.
longitudeMemberPath	끈	바인딩된 모든 항목의 경도를 포함하는 속성의 이름ItemsSource.
latitudeMemberPath	끈	바인딩된 모든 항목에 대한 위도를 포함하는 속성의 이름ItemsSource.
colorMemberPath	끈	각 데이터 항목의 위도 및 경도 좌표 값을 포함하는 속성의 이름입니다. 이 숫자 값은 다음과 같은 경우 색상으로 변환됩니다.colorScale 속성이 설정되었습니다.
trianglesSource	어느	삼각측량 데이터의 소스입니다. 삼각형 설정TriangulationSource이 속성에 대한 개체는 런타임 성능과 지리적 계열 렌더링을 모두 향상시킵니다.
triangleVertexMemberPath1	끈	해당 부동산의 이름trianglesSource 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 항목입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다.
triangleVertexMemberPath2	끈	해당 부동산의 이름trianglesSource 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 항목입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다.
triangleVertexMemberPath3	끈	해당 부동산의 이름trianglesSource 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 항목입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다.

Color Scale

​IgrGeographicScatterAreaSeries의 ColorScale 속성을 사용하여 점의 색상 값을 확인하고 지리 계열의 표면을 채웁니다. 색상은 삼각측량 데이터에 픽셀 단위의 삼각형 래스터라이저를 적용하여 표면 모양 주위로 부드럽게 보간됩니다. 표면 렌더링은 픽셀 단위이므로 색상 스케일에서는 브러시 대신 색상을 사용합니다. 제공된 IgrCustomPaletteColorScale 클래스는 대부분의 색상 요구 사항을 충족해야 하지만 ColorScale 기본 클래스는 사용자 정의 색상 지정 논리를 위해 애플리케이션에서 상속될 수 있습니다.

다음 표에는 GeographicScatterAreaSeries의 표면 색상에 영향을 주는 IgrCustomPaletteColorScale의 속성이 나열되어 있습니다.

속성 이름	부동산 유형	설명
palette	ObservableCollection	선택하거나 보간할 색상 컬렉션을 가져오거나 설정합니다.
interpolationMode	ColorScaleInterpolationMode	팔레트에서 색상을 가져오는 방법을 가져오거나 설정합니다.
maximumValue	더블	색상을 할당할 가장 높은 값입니다. 이 값보다 큰 값은 모두 투명하게 됩니다.
minimumValue	더블	색상을 할당할 가장 낮은 값입니다. 이 값보다 작은 값은 모두 투명합니다.

Code Snippet

다음 코드는 IgrGeographicScatterAreaSeries를 전 세계 표면 온도를 나타내는 삼각측량 데이터에 바인딩하는 방법을 보여줍니다.

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

public onDataLoaded(sds: IgrShapeDataSource, e: any) {
    const contourPoints: any[] = [];
    for (const record of sds.getPointData()) {
        const temp = record.fieldValues.Contour;
        if (temp % 10 === 0 && temp >= 0) {
            for (const shapes of record.points) {
                 for (let i = 0; i < shapes.length; i++) {
                    if (i % 5 === 0) {
                        const point = shapes[i];
                        const item = { lon: point.x, lat: point.y, value: temp};
                        contourPoints.push(item);
                    }
                 }
            }
        }
    }

    this.createAreaSeries(contourPoints);
}

public createAreaSeries(data: any[])
{
    const brushes = [
        "rgba(32, 146, 252, 0.5)",
        "rgba(14, 194, 14, 0.5)",
        "rgba(252, 120, 32, 0.5)",
        "rgba(252, 32, 32, 0.5)",
    ];

    const colorScale = new IgrCustomPaletteColorScale({});
    colorScale.palette = brushes;
    colorScale.minimumValue = 0;
    colorScale.maximumValue = 30;

    const areaSeries = new IgrGeographicScatterAreaSeries( { name: "areaSeries" });
    areaSeries.dataSource = data;
    areaSeries.longitudeMemberPath = "lon";
    areaSeries.latitudeMemberPath = "lat";
    areaSeries.colorMemberPath = "value";
    areaSeries.colorScale = colorScale;

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

API References

• colorMemberPath
• colorScale
• IgrCustomPaletteColorScale
• IgrGeographicContourLineSeries
• IgrGeographicScatterAreaSeries
• ItemsSource
• latitudeMemberPath
• longitudeMemberPath
• trianglesSource
• TriangulationSource