Blazor Binding Multiple Data Sources

En el mapa Ignite UI for Blazor, puedes añadir múltiples objetos de serie geográfica para superponer fuentes de datos personalizadas con datos geoespaciales. Por ejemplo,IgbGeographicSymbolSeries para trazar ubicaciones geográficas de aeropuertos, elIgbGeographicPolylineSeries para trazar vuelos entre aeropuertos, y 2ºIgbGeographicPolylineSeries para trazar líneas de cuadrícula de coordenadas geográficas principales.

Blazor Binding Multiple Data Sources Example

Este tema lo lleva paso a paso para mostrar múltiples series geográficas que trazarán los siguientes datos geoespaciales:

IgbGeographicSymbolSeries– muestra la ubicación de los principales aeropuertos
IgbGeographicPolylineSeries– muestra vuelos entre aeropuertos
IgbGeographicPolylineSeries– muestra las líneas de cuadrícula de coordenadas principales

Puede utilizar series geográficas en esta u otras combinaciones para trazar los datos deseados.

Creating Data Sources

Cree fuentes de datos para todas las series geográficas que desee mostrar en la Ignite UI for Blazor. Por ejemplo, puede utilizar el 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

Crea el primerIgbGeographicPolylineSeries objeto con conexiones de vuelo entre aeropuertos principales y añádelo a la colección de la Serie del mapa de 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

Crea un segundoIgbGeographicPolylineSeries objeto con líneas de cuadrícula geográficas y añádelo a la colección de Series del mapa de Ignite UI for Blazor.

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

Overlaying Airports

CreaIgbGeographicSymbolSeries un objeto con puntos de aeropuerto y añádelo a la colección de la Serie del mapa geográfico 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

Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto.

@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