Blazor 지리적 거품 지도
Blazor 지도 구성 요소에서는 IgbGeographicProportionalSymbolSeries
사용하여 애플리케이션의 데이터로 지정된 지리적 위치에 거품이나 비례 표식을 그릴 수 있습니다. 이 지도 시리즈는 백화점, 창고 또는 사무실과 같은 특정 비즈니스 사례에서 관심 지점을 강조하는 데 유용할 수 있습니다. 또한 차량 관리 시스템이나 동적 차량 추적을 위한 GPS 시스템에서 이 지도 시리즈를 사용할 수 있습니다.
Blazor Geographic Bubble Map Example
위의 데모는 IgbGeographicProportionalSymbolSeries
계열과 계열의 데이터 바인딩 옵션을 지정하는 방법을 보여줍니다. 자동 마커 선택은 마커 충돌 방지 논리와 함께 구성되며 마커 윤곽선 및 채우기 색상도 지정됩니다.
Configuration Summary
지도 컨트롤의 다른 유형의 분산 계열과 마찬가지로 IgbGeographicProportionalSymbolSeries
계열에는 개체 배열에 바인딩할 수 있는 DataSource
속성이 있습니다. 또한 항목 소스의 각 데이터 항목에는 지리적 경도 및 위도 좌표를 저장하고 LongitudeMemberPath
및 LatitudeMemberPath
속성을 사용하여 이러한 데이터 열을 매핑하는 두 개의 데이터 열이 있어야 합니다. RadiusScale
및 RadiusMemberPath
설정은 거품의 반경을 구성합니다.
다음 표에는 데이터 바인딩에 사용되는 GeographicHighDensityScatterSeries 계열 속성이 요약되어 있습니다.
재산 | 유형 | 설명 |
---|---|---|
DataSource |
어느 | 항목 소스를 가져오거나 설정합니다. |
LongitudeMemberPath |
끈 | ItemsSource 속성을 사용하여 할당된 항목의 경도 값 위치를 결정합니다. |
LatitudeMemberPath |
끈 | ItemsSource 속성을 사용하여 할당된 항목의 위도 값 위치를 결정합니다. |
RadiusMemberPath |
끈 | 계열의 반경 값을 가져오는 데 사용할 경로를 설정합니다. |
RadiusScale |
IgbSizeScale |
현재 거품 계열의 반경 배율 속성을 가져오거나 설정합니다. |
MinimumValue |
어느 | 값 하위 범위를 계산하기 위한 최소값을 구성합니다. |
MaximumValue |
어느 | 값 하위 범위를 계산하기 위한 최대값을 구성합니다. |
Code Snippet
@using IgniteUI.Blazor.Controls
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<IgbGeographicProportionalSymbolSeries DataSource="WorldCities"
MarkerType="MarkerType.Circle"
RadiusScale="SeriesSizeScale"
FillScale="ColorScale"
FillMemberPath="Pop"
RadiusMemberPath="Pop"
LatitudeMemberPath="Lat"
LongitudeMemberPath="Lon"
MarkerOutline="rgba(0,0,0,0.3)" />
</IgbGeographicMap>
@code {
private List<WorldCity> WorldCities;
private SizeScale SeriesSizeScale;
private ValueBrushScale ColorScale;
protected override void OnInitialized()
{
this.WorldCities = WorldLocations.GetAll();
this.SeriesSizeScale = new SizeScale()
{
MinimumValue = 4,
MaximumValue = 60
};
this.ColorScale = new ValueBrushScale()
{
Brushes = "rgba(14, 194, 14, 0.4), rgba(252, 170, 32, 0.4), rgba(252, 32, 32, 0.4)",
MinimumValue = 0,
MaximumValue = 30
};
}
}