Blazor Binding Multiple Data Sources

In the Ignite UI for Blazor map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, IgbGeographicSymbolSeries for plotting geographic locations of airports, the IgbGeographicPolylineSeries for plotting flights between airports, and 2nd IgbGeographicPolylineSeries for plotting gridlines of major geographic coordinates.

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

Create first IgbGeographicPolylineSeries object with flight connections between major airports and add it to the Series collection of the Ignite UI for Blazor map.

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

Overlaying Gridlines

Create second IgbGeographicPolylineSeries object with geographic gridlines and add it to the Series collection of the Ignite UI for Blazor map.

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

Overlaying Airports

Create IgbGeographicSymbolSeries object with airport points and add it to the Series collection of the geographic Ignite UI for Blazor map.

<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