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.

    Blazor Binding Multiple Data Sources Example

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

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    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.

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

    Overlaying Flights

    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

    Overlaying Gridlines

    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

    Overlaying Airports

    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

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

    API References