Blazor Binding Multiple Data Sources

    Ignite UI for Blazor 맵에서 여러 지리적 시리즈 객체를 추가하여 사용자 지정 데이터 소스를 지리 공간 데이터와 오버레이할 수 있습니다. 예를 들어, 공항의 지리적 위치를 플로팅하기 위한 IgbGeographicSymbolSeries, 공항 간 항공편을 플로팅하기 위한 IgbGeographicPolylineSeries, 주요 지리적 좌표의 격자선을 플로팅하기 위한 2nd IgbGeographicPolylineSeries 있습니다.

    Blazor Binding Multiple Data Sources Example

    EXAMPLE
    MODULES
    GeoLocation.cs
    WorldCity.cs
    WorldConnections.cs
    WorldLocations.cs
    WorldUtils.cs
    RAZOR
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    이 항목에서는 다음과 같은 지리 공간 데이터를 표시하는 여러 지리 계열을 표시하는 방법을 단계별로 설명합니다.

    이 조합이나 다른 조합으로 지리적 계열을 사용하여 원하는 데이터를 표시할 수 있습니다.

    Creating Data Sources

    Ignite UI for Blazor 맵에 표시하려는 모든 지리적 시리즈에 대한 데이터 소스를 만듭니다. 예를 들어, WorldConnections 스크립트를 사용할 수 있습니다.

    @code {
    
        public List<WorldCity> Airports;
        public List<FlightInfo> Flights;
        public List<CoordinateLine> Coordinates;
    
        protected override void OnInitialized()
        {
            Airports = WorldConnections.GetAirports();
            Flights = WorldConnections.GetFlights();
            Coordinates = WorldConnections.GetGridlines();
        }
    }
    razor

    Overlaying Flights

    주요 공항 간 항공편 연결을 포함하는 첫 번째 IgbGeographicPolylineSeries 객체를 만들고 이를 Ignite UI for Blazor 맵의 Series 컬렉션에 추가합니다.

    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        <IgbGeographicPolylineSeries DataSource="Flights" ShapeMemberPath="Points"
            ShapeStroke="rgba(196, 14, 14, 0.05)" ShapeStrokeThickness="4" />
    </IgbGeographicMap>
    razor

    Overlaying Gridlines

    지리적 격자선이 있는 두 번째 IgbGeographicPolylineSeries 객체를 만들고 이를 Ignite UI for Blazor 맵의 Series 컬렉션에 추가합니다.

    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        <IgbGeographicPolylineSeries DataSource="Coordinates" ShapeMemberPath="Points"
            ShapeStroke="Gray" ShapeStrokeThickness="1" />
    </IgbGeographicMap>
    razor

    Overlaying Airports

    공항 지점을 사용하여 IgbGeographicSymbolSeries 객체를 만들고 이를 Ignite UI for Blazor 지리적 맵의 Series 컬렉션에 추가합니다.

    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        <IgbGeographicSymbolSeries DataSource="Airports" LatitudeMemberPath="Lat"
            LongitudeMemberPath="Lon" MarkerType="MarkerType.Circle"
            MarkerBrush="#AAD3DF" MarkerOutline="Black" Thickness="1" />
    </IgbGeographicMap>
    razor

    Summary

    귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사할 수 있습니다.

    @using IgniteUI.Blazor.Controls
    
    
    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        <IgbGeographicPolylineSeries DataSource="Flights" ShapeMemberPath="Points"
            ShapeStroke="rgba(196, 14, 14, 0.05)" ShapeStrokeThickness="4" />
        <IgbGeographicPolylineSeries DataSource="Coordinates" ShapeMemberPath="Points"
            ShapeStroke="Gray" ShapeStrokeThickness="1">
        </IgbGeographicPolylineSeries>
        <IgbGeographicSymbolSeries DataSource="Airports" LatitudeMemberPath="Lat"
            LongitudeMemberPath="Lon" MarkerType="MarkerType.Circle"
            MarkerBrush="#AAD3DF" MarkerOutline="Black" Thickness="1" />
    </IgbGeographicMap>
    
    @code {
    
        private List<WorldCity> Airports;
        private List<FlightInfo> Flights;
        private List<CoordinateLine> Coordinates;
    
        protected override void OnInitialized()
        {
            Airports = WorldConnections.GetAirports();
            Flights = WorldConnections.GetFlights();
            Coordinates = WorldConnections.GetGridlines();
        }
    }
    razor

    API References