Blazor 지리적 기호 지도
Blazor 지도 구성 요소에서는 IgbGeographicSymbolSeries
사용하여 지리적 컨텍스트에서 점이나 표식을 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리 시리즈는 도시, 공항, 지진 또는 관심 장소와 같은 지리적 위치 모음을 렌더링하는 데 자주 사용됩니다.
Blazor Geographic Symbol Map Example
Data Requirements
지도 구성 요소의 다른 유형의 지리 계열과 마찬가지로 IgbGeographicSymbolSeries
에는 객체 배열에 바인딩될 수 있는 DataSource
속성이 있습니다. 또한 이 개체의 각 데이터 항목에는 지리적 위치(경도 및 위도)를 저장하는 두 개의 숫자 데이터 열이 있어야 합니다. 그런 다음 이러한 데이터 열은 LatitudeMemberPath
및 LongitudeMemberPath
속성에 매핑됩니다. IgbGeographicSymbolSeries
는 이러한 매핑된 데이터 열의 값을 사용하여 지리 지도 구성 요소의 기호 요소를 그립니다.
Code Snippet
다음 코드는 IgbShapeDataSource
를 사용하여 모양 파일에서 로드된 도시 위치에 IgbGeographicSymbolSeries
를 바인딩하는 방법을 보여줍니다.
@using IgniteUI.Blazor.Controls
<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
<IgbGeographicSymbolSeries DataSource="Cities"
MarkerType="MarkerType.Circle"
LatitudeMemberPath="Lat"
LongitudeMemberPath="Lon"
MarkerBrush="White"
MarkerOutline="Gray" />
<IgbGeographicSymbolSeries DataSource="Capitals"
MarkerType="MarkerType.Circle"
LatitudeMemberPath="Lat"
LongitudeMemberPath="Lon"
MarkerBrush="White"
MarkerOutline="rgb(32, 146, 252)" />
</IgbGeographicMap>
@code {
private List<WorldCity> Cities;
private List<WorldCity> Capitals;
protected override void OnInitialized()
{
this.Cities = WorldLocations.GetCities();
this.Capitals = WorldLocations.GetCapitals();
}
}