Blazor 지리적 고밀도 지도
Blazor 맵 구성 요소에서는 IgbGeographicHighDensityScatterSeries
사용하여 매우 짧은 로드 시간이 필요한 수백에서 수백만 개의 데이터 포인트에 이르는 분산형 데이터를 바인딩하고 표시할 수 있습니다.
Blazor Geographic High Density Map Example
위의 데모는 호주의 인구 밀도를 나타내는 수백 또는 수천 개의 데이터 포인트에 바인딩된 지도 구성 요소의 IgbGeographicHighDensityScatterSeries
시리즈를 보여줍니다. 지도 플롯 영역에는 빨간색 픽셀과 느슨하게 분산된 데이터 포인트가 별개의 파란색 픽셀로 합쳐진 것으로 표시되는 밀도가 높은 데이터 포인트가 있습니다.
데이터 포인트가 너무 많기 때문에 시리즈는 분산형 데이터를 전체 크기 마커가 아닌 작은 점으로 표시하고 데이터 포인트 클러스터를 나타내는 더 높은 색상 밀도를 사용하여 가장 많은 데이터가 있는 영역을 표시합니다.
Data Requirements
지도 컨트롤의 다른 유형의 분산 계열과 마찬가지로 IgbGeographicHighDensityScatterSeries
계열에는 개체 배열에 바인딩할 수 있는 DataSource
속성이 있습니다. 또한 항목 소스의 각 데이터 항목에는 지리적 경도 및 위도 좌표를 저장하고 LongitudeMemberPath
및 LatitudeMemberPath
속성을 사용하여 이러한 데이터 열을 매핑하는 두 개의 데이터 열이 있어야 합니다.
Data Binding
다음 표에는 데이터 바인딩에 사용되는 GeographicHighDensityScatterSeries 계열 속성이 요약되어 있습니다.
재산 | 유형 | 설명 |
---|---|---|
DataSource |
어느 | 항목 소스를 가져오거나 설정합니다. |
LongitudeMemberPath |
끈 | ItemsSource 속성을 사용하여 할당된 항목의 경도 값 위치를 결정합니다. |
LatitudeMemberPath |
끈 | ItemsSource 속성을 사용하여 할당된 항목의 위도 값 위치를 결정합니다. |
Heat Color Scale
선택 기능인 Heat Color Scale은 시리즈 내의 색상 패턴을 결정합니다. 다음 표에는 색상 스케일을 결정하는 데 사용되는 속성이 요약되어 있습니다.
재산 | 유형 | 설명 |
---|---|---|
HeatMinimum |
더블 | 색상 스케일의 최소 끝을 나타내는 이중 값을 정의합니다. |
HeatMaximum |
더블 | 색상 스케일의 최대 끝을 나타내는 이중 값을 정의합니다. |
HeatMinimumColor |
색상 | 색상 스케일의 하단에 사용되는 포인트 밀도 색상을 정의합니다. |
HeatMaximumColor |
색상 | 색상 스케일의 상단에 사용되는 포인트 밀도 색상을 정의합니다. |
Code Example
다음 코드는 IgbGeographicHighDensityScatterSeries
의 HeatMinimumColor
및 HeatMaximumColor
속성을 설정하는 방법을 보여줍니다.
@using IgniteUI.Blazor.Controls
@inject HttpClient Http
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<IgbGeographicHighDensityScatterSeries DataSource="DataSource"
LongitudeMemberPath="Lon"
LatitudeMemberPath="Lat"
HeatMaximumColor="Red"
HeatMinimumColor="10"
HeatMaximum="5"
HeatMinimum="0"
PointExtent="1"
MouseOverEnabled="true" />
</IgbGeographicMap>
@code {
private List<AusPlaceCsv> DataSource;
private Rect GeoBounds;
protected override async Task OnInitializedAsync()
{
string url = "https://static.infragistics.com/xplatform/data/AusPlaces.csv";
string csv = await Http.GetStringAsync(url);
string[] csvLines = csv.Split(Environment.NewLine);
List<AusPlaceCsv> dataItems = new List<AusPlaceCsv>();
for (int i = 1; i < csvLines.Length - 1; i++)
{
string[] columns = csvLines[i].Split(",");
AusPlaceCsv location = new AusPlaceCsv()
{
Lat = double.Parse(columns[2]),
Lon = double.Parse(columns[1]),
Name = columns[0],
};
dataItems.Add(location);
}
this.DataSource = dataItems;
await Task.Delay(1);
}
public class AusPlaceCsv
{
public string Name { get; set; }
public double Lat { get; set; }
public double Lon { get; set; }
public double Pop { get; set; }
public string Country { get; set; }
public bool Cap { get; set; }
}
}