Blazor Binding Multiple Data Sources

    En la Ignite UI for Blazor, puede agregar varios objetos de series geográficas para superponer fuentes de datos personalizadas con datos geoespaciales. Por ejemplo, IgbGeographicSymbolSeries para trazar ubicaciones geográficas de aeropuertos, IgbGeographicPolylineSeries para trazar vuelos entre aeropuertos y 2nd IgbGeographicPolylineSeries para trazar líneas de cuadrícula de coordenadas geográficas principales.

    Ejemplo de vinculación de múltiples fuentes de datos Blazor

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

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

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

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

    Creando fuentes de datos

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

    Vuelos superpuestos

    Cree el primer objeto IgbGeographicPolylineSeries con conexiones de vuelo entre los principales aeropuertos y agréguelo a la colección Series del 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>
    razor

    Superposición de líneas de cuadrícula

    Cree un segundo objeto IgbGeographicPolylineSeries con líneas de cuadrícula geográficas y agréguelo a la colección Series del mapa Ignite UI for Blazor.

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

    Aeropuertos superpuestos

    Cree un objeto IgbGeographicSymbolSeries con puntos de aeropuerto y agréguelo a la colección Series 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>
    razor

    Resumen

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

    Referencias de API