Blazor 지리적 기호 지도

    Blazor 지도 구성 요소에서는 IgbGeographicSymbolSeries 사용하여 지리적 컨텍스트에서 점이나 표식을 사용하여 지리 공간 데이터를 표시할 수 있습니다. 이러한 유형의 지리 시리즈는 도시, 공항, 지진 또는 관심 장소와 같은 지리적 위치 모음을 렌더링하는 데 자주 사용됩니다.

    Blazor Geographic Symbol Map Example

    Data Requirements

    지도 구성 요소의 다른 유형의 지리 계열과 마찬가지로 IgbGeographicSymbolSeries 에는 객체 배열에 바인딩될 수 있는 DataSource 속성이 있습니다. 또한 이 개체의 각 데이터 항목에는 지리적 위치(경도 및 위도)를 저장하는 두 개의 숫자 데이터 열이 있어야 합니다. 그런 다음 이러한 데이터 열은 LatitudeMemberPathLongitudeMemberPath 속성에 매핑됩니다. 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();
        }
    }
    

    API References