Blazor 지리적 등고선 지도
Blazor 지도 구성 요소에서는 IgbGeographicContourLineSeries
사용하여 각 지점에 숫자 값이 할당된 경도 및 위도 데이터의 삼각측량을 기반으로 지리적 컨텍스트에서 색상이 있는 등고선을 그릴 수 있습니다. 이러한 유형의 지리 계열은 기상 온도, 기압, 강수량, 인구 분포, 지형 데이터 등과 같은 지리적 위치로 정의된 분산 데이터를 렌더링하는 데 유용합니다.
Blazor Geographic Contour Map Example
IgbGeographicContourLineSeries
는 데이터를 채우기 스케일과 지리 산란 영역 시리즈를 사용하여 색상이 지정된 등고선으로 표현하고 데이터를 색상 스케일을 사용하여 보간된 표면으로 표현한다는 점을 제외하면 IgbGeographicScatterAreaSeries
와 매우 유사하게 작동합니다.
Data Requirements
지도 구성 요소의 다른 유형의 지리 계열과 유사하게 IgbGeographicContourLineSeries
에는 객체 배열에 바인딩될 수 있는 DataSource
속성이 있습니다. 또한 항목 원본의 각 항목에는 세 개의 데이터 열이 있어야 합니다. 두 개는 지리적 위치(경도 및 위도 좌표)를 저장하고 한 개의 데이터 열은 지리적 위치와 연결된 값을 저장합니다. 이러한 데이터 열은 지리 계열의 LongitudeMemberPath
, LatitudeMemberPath
및 ValueMemberPath
속성으로 식별됩니다. IgbGeographicContourLineSeries
는 TrianglesSource
속성에 삼각 분할이 설정되지 않은 경우 ItemsSource의 항목에 대해 기본 제공 데이터 삼각 분할을 자동으로 수행합니다. 그러나 삼각분할 계산은 시간이 많이 걸리는 프로세스일 수 있으므로 이 속성에 대해 TriangulationSource
지정하면 특히 많은 수의 데이터 항목이 있는 경우 런타임 성능이 더 좋아집니다.
Data Binding
다음 표에는 데이터 바인딩에 사용되는 IgbGeographicContourLineSeries
의 속성이 요약되어 있습니다.
속성 이름 | 부동산 유형 | 설명 |
---|---|---|
DataSource |
어느 | 삼각측량을 수행할 데이터 항목의 소스입니다.TrianglesSource 속성은 삼각측량 데이터를 제공하지 않습니다. |
LongitudeMemberPath |
끈 | 바인딩된 모든 항목의 경도를 포함하는 속성의 이름DataSource . |
LatitudeMemberPath |
끈 | 바인딩된 모든 항목에 대한 위도를 포함하는 속성의 이름DataSource . |
ValueMemberPath |
끈 | 각 데이터 항목의 위도 및 경도 좌표 값을 포함하는 속성의 이름입니다. 이 숫자 값은 다음과 같은 경우 색상으로 변환됩니다.FillScale 속성이 설정되었습니다. |
TrianglesSource |
어느 | 삼각측량 데이터의 소스를 가져오거나 설정합니다. TriangulationSource 개체의 삼각형을 이 속성으로 설정하면 런타임 성능과 지리 계열 렌더링이 모두 향상됩니다. |
TriangleVertexMemberPath1 |
끈 | 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 TrianglesSource 항목의 속성 이름입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다. |
TriangleVertexMemberPath2 |
끈 | 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 TrianglesSource 항목의 속성 이름입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다. |
TriangleVertexMemberPath3 |
끈 | 각 삼각형에 대해 ItemsSource의 첫 번째 꼭지점 인덱스를 포함하는 TrianglesSource 항목의 속성 이름입니다. 이 속성을 반드시 설정해야 하는 것은 아닙니다. 사용자 정의 삼각 측량 논리가 제공되지 않는 한 기본적으로 사용됩니다. |
Contour Fill Scale
IgbGeographicContourLineSeries
의 FillScale
속성을 사용하여 지리적 계열의 등고선 채우기 브러시를 확인합니다. 제공된 `ValueBrushScale 클래스는 대부분의 색상 요구 사항을 충족해야 하지만 사용자 정의 색상 지정 논리에 대한 애플리케이션은 ValueBrushScale 클래스를 상속할 수 있습니다. 다음 표에는 GeographicContourLineSeries의 표면 색상에 영향을 주는 CustomPaletteColorScale의 속성이 나열되어 있습니다.
속성 이름 | 부동산 유형 | 설명 |
---|---|---|
Brushes |
브러시컬렉션 | 윤곽선을 채우기 위한 브러시 컬렉션을 가져오거나 설정합니다.IgbGeographicContourLineSeries |
MaximumValue |
더블 | 채우기 배율에서 브러시를 할당할 가장 높은 값입니다. |
MinimumValue |
더블 | 채우기 배율에서 브러시를 할당하는 가장 낮은 값입니다. |
Code Snippet
다음 코드는 IgbGeographicContourLineSeries
를 전 세계 표면 온도를 나타내는 삼각측량 데이터에 바인딩하는 방법을 보여줍니다.
@using IgniteUI.Blazor.Controls
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<IgbGeographicContourLineSeries LongitudeMemberPath="Lon"
LatitudeMemberPath="Lat"
ValueMemberPath="Value"
FillScale="@BrushScale"
DataSource="@Data"
Thickness="2">
</IgbGeographicContourLineSeries>
</IgbGeographicMap>
@code {
private List<Location> Data;
private ValueBrushScale BrushScale;
protected override void OnInitialized()
{
var brushes = "";
brushes += "rgba(32, 146, 252, 0.5) "; // semi-transparent blue
brushes += "rgba(14, 194, 14, 0.5) "; // semi-transparent green
brushes += "rgba(252, 120, 32, 0.5) "; // semi-transparent orange
brushes += "rgba(252, 32, 32, 0.5) "; // semi-transparent red
this.BrushScale = new ValueBrushScale();
this.BrushScale.Brushes = brushes;
this.BrushScale.MinimumValue = 0;
this.BrushScale.MaximumValue = 30;
this.Data = WorldTemperatures.Load();
}
}