Blazor Binding Multiple Data Sources

No mapa Ignite UI for Blazor, você pode adicionar vários objetos de série geográfica para sobrepor fontes de dados personalizadas com dados geoespaciais. Por exemplo, IgbGeographicSymbolSeries para plotar localizações geográficas de aeroportos, para IgbGeographicPolylineSeries plotar voos entre aeroportos e 2º IgbGeographicPolylineSeries para plotar linhas de grade das principais coordenadas geográficas.

Blazor Binding Multiple Data Sources Example

Este tópico mostra passo a passo a exibição de várias séries geográficas que serão plotadas nos seguintes dados geoespaciais:

IgbGeographicSymbolSeries– exibe a localização dos principais aeroportos
IgbGeographicPolylineSeries– exibe voos entre aeroportos
IgbGeographicPolylineSeries – displays gridlines of major coordinates

Você pode usar séries geográficas nesta ou em outras combinações para plotar os dados desejados.

Creating Data Sources

Crie fontes de dados para todas as séries geográficas que você deseja exibir no mapa Ignite UI for Blazor. Por exemplo, você pode usar o script 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

Crie o primeiro IgbGeographicPolylineSeries objeto com conexões de voo entre os principais aeroportos e adicione-o à coleção Série do mapa 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

Crie um segundo IgbGeographicPolylineSeries objeto com linhas de grade geográficas e adicione-o à coleção Série do mapa Ignite UI for Blazor.

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

Overlaying Airports

Crie IgbGeographicSymbolSeries um objeto com pontos de aeroporto e adicione-o à coleção Série do mapa de Ignite UI for Blazor geográfico.

<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

Para sua conveniência, todos os trechos de código acima são combinados em um bloco de código abaixo que você pode copiar facilmente para seu projeto.

@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