Angular 지리 등고선 지도
Angular 지도 구성 요소에서는 IgxGeographicContourLineSeriesComponent
사용하여 각 지점에 숫자 값이 할당된 경도 및 위도 데이터의 삼각 측량을 기반으로 지리적 맥락에서 색상 등고선을 그릴 수 있습니다. 이러한 유형의 지리 계열은 기상 온도, 기압, 강수량, 인구 분포, 지형 데이터 등과 같은 지리적 위치로 정의된 분산 데이터를 렌더링하는 데 유용합니다.
Angular Geographic Contour Map Example
IgxGeographicContourLineSeriesComponent
는 데이터를 채우기 스케일과 지리적 분산 영역 시리즈를 사용하여 색상이 지정된 등고선으로 나타내고 데이터를 색상 스케일을 사용하여 보간된 표면으로 표현한다는 점을 제외하면 IgxGeographicScatterAreaSeriesComponent
와 매우 유사하게 작동합니다.
Data Requirements
지도 구성 요소의 다른 유형의 지리적 계열과 유사하게 IgxGeographicContourLineSeriesComponent
에는 객체 배열에 바인딩될 수 있는 ItemsSource
속성이 있습니다. 또한 항목 원본의 각 항목에는 세 개의 데이터 열이 있어야 합니다. 두 개는 지리적 위치(경도 및 위도 좌표)를 저장하고 한 개의 데이터 열은 지리적 위치와 연결된 값을 저장합니다. 이러한 데이터 열은 지리 계열의 longitudeMemberPath
, latitudeMemberPath
및 valueMemberPath
속성으로 식별됩니다. IgxGeographicContourLineSeriesComponent
는 trianglesSource
소스 속성에 삼각 분할이 설정되지 않은 경우 ItemsSource의 항목에 대해 기본 제공 데이터 삼각 측량을 자동으로 수행합니다. 그러나 삼각분할 계산은 시간이 많이 걸리는 프로세스일 수 있으므로 이 속성에 대해 TriangulationSource
지정하면 특히 많은 수의 데이터 항목이 있는 경우 런타임 성능이 더 좋아집니다.
Data Binding
다음 표에는 데이터 바인딩에 사용되는 IgxGeographicContourLineSeriesComponent
의 속성이 요약되어 있습니다.
속성 이름 | 부동산 유형 | 설명 |
---|---|---|
ItemsSource |
어느 | 삼각측량을 수행할 데이터 항목의 소스입니다.trianglesSource 속성은 삼각측량 데이터를 제공하지 않습니다. |
longitudeMemberPath |
끈 | 바인딩된 모든 항목의 경도를 포함하는 속성의 이름ItemsSource . |
latitudeMemberPath |
끈 | 바인딩된 모든 항목에 대한 위도를 포함하는 속성의 이름ItemsSource . |
valueMemberPath |
끈 | 각 데이터 항목의 위도 및 경도 좌표 값을 포함하는 속성의 이름입니다. 이 숫자 값은 다음과 같은 경우 색상으로 변환됩니다.fillScale 속성이 설정되었습니다. |
trianglesSource |
어느 | 삼각측량 데이터의 소스를 가져오거나 설정합니다. TriangulationSource 개체의 삼각형을 이 속성으로 설정하면 런타임 성능과 지리 계열 렌더링이 모두 향상됩니다. |
triangleVertexMemberPath1 |
끈 | 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 TrianglesSource 항목의 속성 이름입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다. |
triangleVertexMemberPath2 |
끈 | 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 TrianglesSource 항목의 속성 이름입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다. |
triangleVertexMemberPath3 |
끈 | 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 TrianglesSource 항목의 속성 이름입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다. |
Contour Fill Scale
IgxGeographicContourLineSeriesComponent
의 fillScale
속성을 사용하여 지리적 계열의 등고선 채우기 브러시를 확인합니다. 제공된 `ValueBrushScale 클래스는 대부분의 색상 요구 사항을 충족해야 하지만 사용자 정의 색상 지정 논리에 대한 애플리케이션은 ValueBrushScale 클래스를 상속할 수 있습니다. 다음 표에는 GeographicContourLineSeries의 표면 색상에 영향을 주는 CustomPaletteColorScale의 속성이 나열되어 있습니다.
속성 이름 | 부동산 유형 | 설명 |
---|---|---|
brushes |
브러시컬렉션 | 윤곽선을 채우기 위한 브러시 컬렉션을 가져오거나 설정합니다.IgxGeographicContourLineSeriesComponent |
maximumValue |
더블 | 채우기 배율에서 브러시를 할당할 가장 높은 값입니다. |
minimumValue |
더블 | 채우기 배율에서 브러시를 할당하는 가장 낮은 값입니다. |
Code Snippet
다음 코드는 IgxGeographicContourLineSeriesComponent
를 전 세계 표면 온도를 나타내는 삼각 측량 데이터에 바인딩하는 방법을 보여줍니다.
<div className="sampleRoot" >
<igx-geographic-map #map
width="700px"
height="500px"
zoomable="true" >
</igx-geographic-map>
</div>
<ng-template let-series="series" let-item="item" #template>
<span [style.color]="series.brush">
{{item | number: 2}} "°C"
</span>
</ng-template>
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicContourLineSeriesComponent } from 'igniteui-angular-maps';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
@Component({
selector: "app-map-geographic-scatter-contour-series",
styleUrls: ["./map-geographic-scatter-contour-series.component.scss"],
templateUrl: "./map-geographic-scatter-contour-series.component.html"
})
export class MapTypeScatterContourSeriesComponent implements AfterViewInit {
@ViewChild ("map")
public map: IgxGeographicMapComponent;
@ViewChild ("template")
public tooltip: TemplateRef<object>;
constructor() {
}
public ngAfterViewInit(): void {
const sds = new IgxShapeDataSource();
sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp";
sds.databaseSource = "assets/Shapes/WorldTemperatures.dbf";
sds.dataBind();
sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
}
public onDataLoaded(sds: IgxShapeDataSource, 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.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)", // 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 IgxValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const contourSeries = new IgxGeographicContourLineSeriesComponent();
contourSeries.dataSource = data;
contourSeries.longitudeMemberPath = "lon";
contourSeries.latitudeMemberPath = "lat";
contourSeries.valueMemberPath = "value";
contourSeries.fillScale = brushScale;
contourSeries.tooltipTemplate = this.tooltip;
contourSeries.thickness = 4;
this.map.series.add(contourSeries);
}
}
API References
fillScale
IgxGeographicContourLineSeriesComponent
IgxGeographicScatterAreaSeriesComponent
ItemsSource
latitudeMemberPath
longitudeMemberPath
trianglesSource
TriangulationSource
IgxValueBrushScaleComponent
valueMemberPath