React 지리적 등고선 지도

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

React Geographic Contour Map Example

​IgrGeographicContourLineSeries는 데이터를 채우기 스케일과 지리적 분산 영역 시리즈를 사용하여 색상이 지정된 등고선으로 나타내고 데이터를 색상 스케일을 사용하여 보간된 표면으로 표현한다는 점을 제외하면 IgrGeographicScatterAreaSeries와 매우 유사하게 작동합니다.

Data Requirements

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

Data Binding

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

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

Contour Fill Scale

​IgrGeographicContourLineSeries의 fillScale 속성을 사용하여 지리적 계열의 등고선 채우기 브러시를 확인합니다. 제공된 `ValueBrushScale 클래스는 대부분의 색상 요구 사항을 충족해야 하지만 사용자 정의 색상 지정 논리에 대한 애플리케이션은 ValueBrushScale 클래스를 상속할 수 있습니다. 다음 표에는 GeographicContourLineSeries의 표면 색상에 영향을 주는 CustomPaletteColorScale의 속성이 나열되어 있습니다.

속성 이름	부동산 유형	설명
brushes	브러시컬렉션	윤곽선을 채우기 위한 브러시 컬렉션을 가져오거나 설정합니다.IgrGeographicContourLineSeries
maximumValue	더블	채우기 배율에서 브러시를 할당할 가장 높은 값입니다.
minimumValue	더블	채우기 배율에서 브러시를 할당하는 가장 낮은 값입니다.

Code Snippet

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

import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicContourLineSeries } from 'igniteui-react-maps';
import { IgrValueBrushScale } from 'igniteui-react-charts';
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;
    this.geoMap.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
    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 p = shapes[i];
                        const item = { lon: p.x, lat: p.y, value: temp};
                        contourPoints.push(item);
                    }
                 }
            }
        }
    }

    this.createContourSeries(contourPoints);
}

public createContourSeries(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 brushScale = new IgrValueBrushScale({});
    brushScale.brushes = brushes;
    brushScale.minimumValue = 0;
    brushScale.maximumValue = 30;

    const contourSeries = new IgrGeographicContourLineSeries( { name: "contourSeries" });
    contourSeries.dataSource = data;
    contourSeries.longitudeMemberPath = "lon";
    contourSeries.latitudeMemberPath = "lat";
    contourSeries.valueMemberPath = "value";
    contourSeries.fillScale = brushScale;
    contourSeries.thickness = 4;

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

API References

• fillScale
• IgrGeographicContourLineSeries
• IgrGeographicScatterAreaSeries
• ItemsSource
• latitudeMemberPath
• longitudeMemberPath
• trianglesSource
• TriangulationSource
• IgrValueBrushScale
• valueMemberPath