Web Components 지리적 등고선 지도
Web Components 지도 구성 요소에서는 IgcGeographicContourLineSeriesComponent
사용하여 각 지점에 숫자 값이 할당된 경도 및 위도 데이터의 삼각 측량을 기반으로 지리적 맥락에서 색상 등고선을 그릴 수 있습니다. 이러한 유형의 지리 계열은 기상 온도, 기압, 강수량, 인구 분포, 지형 데이터 등과 같은 지리적 위치로 정의된 분산 데이터를 렌더링하는 데 유용합니다.
Web Components Geographic Contour Map Example
IgcGeographicContourLineSeriesComponent
는 데이터를 채우기 스케일과 지리적 분산 영역 시리즈를 사용하여 색상이 지정된 등고선으로 나타내고 데이터를 색상 스케일을 사용하여 보간된 표면으로 표현한다는 점을 제외하면 IgcGeographicScatterAreaSeriesComponent
와 매우 유사하게 작동합니다.
Data Requirements
지도 구성 요소의 다른 유형의 지리 계열과 유사하게 IgcGeographicContourLineSeriesComponent
에는 객체 배열에 바인딩될 수 있는 ItemsSource
속성이 있습니다. 또한 항목 원본의 각 항목에는 세 개의 데이터 열이 있어야 합니다. 두 개는 지리적 위치(경도 및 위도 좌표)를 저장하고 한 개의 데이터 열은 지리적 위치와 연결된 값을 저장합니다. 이러한 데이터 열은 지리 계열의 longitudeMemberPath
, latitudeMemberPath
및 valueMemberPath
속성으로 식별됩니다. IgcGeographicContourLineSeriesComponent
는 trianglesSource
속성에 삼각측량이 설정되지 않은 경우 ItemsSource의 항목에 대해 기본 제공 데이터 삼각측량을 자동으로 수행합니다. 그러나 삼각분할 계산은 시간이 많이 걸리는 프로세스일 수 있으므로 이 속성에 대해 TriangulationSource
지정하면 특히 많은 수의 데이터 항목이 있는 경우 런타임 성능이 더 좋아집니다.
Data Binding
다음 표에는 데이터 바인딩에 사용되는 IgcGeographicContourLineSeriesComponent
의 속성이 요약되어 있습니다.
속성 이름 | 부동산 유형 | 설명 |
---|---|---|
ItemsSource |
어느 | 삼각측량을 수행할 데이터 항목의 소스입니다.trianglesSource 속성은 삼각측량 데이터를 제공하지 않습니다. |
longitudeMemberPath |
끈 | 바인딩된 모든 항목의 경도를 포함하는 속성의 이름ItemsSource . |
latitudeMemberPath |
끈 | 바인딩된 모든 항목에 대한 위도를 포함하는 속성의 이름ItemsSource . |
valueMemberPath |
끈 | 각 데이터 항목의 위도 및 경도 좌표 값을 포함하는 속성의 이름입니다. 이 숫자 값은 다음과 같은 경우 색상으로 변환됩니다.fillScale 속성이 설정되었습니다. |
trianglesSource |
어느 | 삼각측량 데이터의 소스를 가져오거나 설정합니다. TriangulationSource 개체의 삼각형을 이 속성으로 설정하면 런타임 성능과 지리 계열 렌더링이 모두 향상됩니다. |
triangleVertexMemberPath1 |
끈 | 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 TrianglesSource 항목의 속성 이름입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다. |
triangleVertexMemberPath2 |
끈 | 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 TrianglesSource 항목의 속성 이름입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다. |
triangleVertexMemberPath3 |
끈 | 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 TrianglesSource 항목의 속성 이름입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다. |
Contour Fill Scale
IgcGeographicContourLineSeriesComponent
의 fillScale
속성을 사용하여 지리적 계열의 등고선 채우기 브러시를 확인합니다. 제공된 `ValueBrushScale 클래스는 대부분의 색상 요구 사항을 충족해야 하지만 사용자 정의 색상 지정 논리에 대한 애플리케이션은 ValueBrushScale 클래스를 상속할 수 있습니다. 다음 표에는 GeographicContourLineSeries의 표면 색상에 영향을 주는 CustomPaletteColorScale의 속성이 나열되어 있습니다.
속성 이름 | 부동산 유형 | 설명 |
---|---|---|
brushes |
브러시컬렉션 | 윤곽선을 채우기 위한 브러시 컬렉션을 가져오거나 설정합니다.IgcGeographicContourLineSeriesComponent |
maximumValue |
더블 | 채우기 배율에서 브러시를 할당할 가장 높은 값입니다. |
minimumValue |
더블 | 채우기 배율에서 브러시를 할당하는 가장 낮은 값입니다. |
Code Snippet
다음 코드는 IgcGeographicContourLineSeriesComponent
를 전 세계 표면 온도를 나타내는 삼각 측량 데이터에 바인딩하는 방법을 보여줍니다.
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicContourLineSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcValueBrushScaleComponent } from 'igniteui-webcomponents-charts';
import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
//...
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
const sfc = new IgcShapeDataSource();
sfc.importCompleted = this.onDataLoaded;
sfc.shapefileSource = "../shapes/WorldTemperatures.shp");
sfc.databaseSource = "../shapes/WorldTemperatures.dbf");
}
onDataLoaded(sds: IgcShapeDataSource, e: any) {
const shapeRecords = sds.getPointData();
const contourPoints: any[] = [];
for (const record of shapeRecords) {
const temp = record.fieldValues.Contour;
// using only major contours (every 10th degrees Celsius)
if (temp % 10 === 0 && temp >= 0) {
for (const shapes of record.points) {
for (let i = 0; i < shapes.count; i++) {
if (i % 5 === 0) {
const point = shapes[i];
const item = { lon: point.x, lat: point.y, value: temp };
contourPoints.push(item);
}
}
}
}
}
this.createContourSeries(contourPoints);
}
createContourSeries(data: any[])
{
const brushes = [
"rgba(32, 146, 252, 0.5)", // semi-transparent blue
"rgba(14, 194, 14, 0.5)", // semi-transparent green
"rgba(252, 120, 32, 0.5)", // semi-transparent orange
"rgba(252, 32, 32, 0.5)", // semi-transparent red
];
const brushScale = new IgcValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const contourSeries = new IgcGeographicContourLineSeriesComponent();
contourSeries.dataSource = data;
contourSeries.longitudeMemberPath = "lon";
contourSeries.latitudeMemberPath = "lat";
contourSeries.valueMemberPath = "value";
contourSeries.fillScale = brushScale;
contourSeries.thickness = 4;
this.geoMap.series.add(contourSeries);
}