Blazor Binding Multiple Data Sources

Ignite UI for Blazor 지도에서는 여러 지리적 시리즈 객체를 추가하여 사용자 지정 데이터 소스에 지리공간 데이터를 겹칠 수 있습니다. 예를 들어,IgbGeographicSymbolSeries 공항의 지리적 위치를 표시하는 데는 이 지점, 공항 간 비행 경로를 표시하는 데IgbGeographicPolylineSeries 사용하며, 2번째IgbGeographicPolylineSeries는 주요 지리 좌표의 격자선을 그리는 데 사용됩니다.

Blazor Binding Multiple Data Sources Example

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

IgbGeographicSymbolSeries– 주요 공항 위치 표시
IgbGeographicPolylineSeries– 공항 간 항공편 표시
IgbGeographicPolylineSeries– 주요 좌표의 격자선 표시

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

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();
    }
}

Overlaying Flights

주요 공항 간 항공편 연결편이 있는 첫IgbGeographicPolylineSeries 번째 오브젝트를 만들어 Ignite UI for Blazor 지도의 시리즈 컬렉션에 추가하세요.

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

Overlaying Gridlines

지리적 격자선으로 두 번째IgbGeographicPolylineSeries 객체를 만들어 Ignite UI for Blazor 지도의 시리즈 컬렉션에 추가하세요.

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

Overlaying Airports

공항 포인트가 포함된 객체를 생성IgbGeographicSymbolSeries 하여 지리적 Ignite UI for Blazor 지도의 시리즈 컬렉션에 추가하세요.

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

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();
    }
}

Blazor Binding Multiple Data Sources