Blazor Binding Geographic Data Models

    El componente de mapa Ignite UI for Blazor está diseñado para mostrar datos geoespaciales de archivos de formas y/o ubicaciones geográficas de modelos de datos en mapas de imágenes geográficas. La DataSource propiedad de serie geográfica se utiliza con el fin de enlazar a modelos de datos. Esta propiedad se puede enlazar a una matriz de objetos personalizados.

    Ejemplo de vinculación de modelos de datos geográficos 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.

    La siguiente tabla resume las estructuras de datos necesarias para cada tipo de serie geográfica:

    Serie Geográfica Propiedades Descripción
    IgbGeographicSymbolSeries LongitudeMemberPath, LatitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgbGeographicHighDensityScatterSeries LongitudeMemberPath, LatitudeMemberPath Specifies names of 2 numeric longitude and latitude coordinates
    IgbGeographicProportionalSymbolSeries LongitudeMemberPath, LatitudeMemberPath, RadiusMemberPath Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols
    IgbGeographicScatterAreaSeries LongitudeMemberPath, LatitudeMemberPath, ColorMemberPath Especifica nombres de 2 coordenadas numéricas de longitud y latitud y 1 columna numérica para triangulación de valores.
    IgbGeographicContourLineSeries LongitudeMemberPath, LatitudeMemberPath, ValueMemberPath Especifica nombres de 2 coordenadas numéricas de longitud y latitud y 1 columna numérica para triangulación de valores.
    IgbGeographicShapeSeries ShapeMemberPath Especifica el nombre de la columna de datos deDataSource elementos que contienen los puntos geográficos de las formas. Esta propiedad debe asignarse a una matriz de matrices de objetos con propiedades xey.
    IgbGeographicPolylineSeries ShapeMemberPath Especifica el nombre de la columna de datos deDataSource elementos que contienen las coordenadas geográficas de las líneas. Esta propiedad debe asignarse a una matriz de matrices de objetos con propiedades xey.

    Fragmento de código

    El siguiente código muestra cómo vincular IgbGeographicSymbolSeries a un modelo de datos personalizado que contiene ubicaciones geográficas de algunas ciudades del mundo almacenadas usando coordenadas de longitud y latitud. Además, utilizamos IgbGeographicPolylineSeries para trazar la ruta geográfica más corta entre estas ubicaciones utilizando WorldUtility.

    @using IgniteUI.Blazor.Controls
    
    
    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        @for (int i = 0; i < this.DataSource.Count; i++)
        {
            FlightInfo info = this.DataSource[i];
            List<WorldCity> symbolData = new List<WorldCity>() { info.Origin, info.Dest };
    
            GeoLocation geoOrigin = new GeoLocation() { Lat = info.Origin.Lat, Lon = info.Origin.Lon };
            GeoLocation geoDest = new GeoLocation() { Lat = info.Dest.Lat, Lon = info.Dest.Lon };
    
            List<List<Point>> geoPath = WorldUtils.CalcPaths(geoOrigin, geoDest);
            double geoDistance = WorldUtils.CalcDistance(geoOrigin, geoDest);
    
            FlightInfo route = new FlightInfo()
            {
                Points =  geoPath,
                Origin = info.Origin,
                Dest = info.Dest,
                Distance = geoDistance,
                Time = geoDistance / 850
            };
    
            List<FlightInfo> geoRoute = new List<FlightInfo>() { route };
    
            <IgbGeographicSymbolSeries DataSource="@symbolData" MarkerType="MarkerType.Circle"
                                    LatitudeMemberPath="Lat" LongitudeMemberPath="Lon"
                                    MarkerBrush="White" MarkerOutline="@info.Color"
                                    Thickness="1">
            </IgbGeographicSymbolSeries>
            <IgbGeographicPolylineSeries DataSource="@geoRoute" ShapeMemberPath="Points"
                                      ShapeStrokeThickness="9" ShapeOpacity="0.5"
                                      ShapeStroke="@info.Color">
            </IgbGeographicPolylineSeries>
        }
    </IgbGeographicMap>
    
    @code {
    
        private List<FlightInfo> DataSource;
    
        protected override void OnInitialized()
        {
            WorldCity cityDAL = new WorldCity() { Lat = 32.763, Lon = -96.663, Country = "US", Name = "Dallas" };
            WorldCity citySYD = new WorldCity() { Lat = -33.889, Lon = 151.028, Country = "Australia", Name = "Sydney" };
            WorldCity cityNZL = new WorldCity() { Lat = -36.848, Lon = 174.763, Country = "New Zealand", Name = "Auckland" };
            WorldCity cityQTR = new WorldCity() { Lat = 25.285, Lon = 51.531, Country = "Qatar", Name = "Doha" };
            WorldCity cityPAN = new WorldCity() { Lat = 8.949, Lon = -79.400, Country = "Panama", Name = "Panama" };
            WorldCity cityCHL = new WorldCity() { Lat = -33.475, Lon = -70.647, Country = "Chile", Name = "Santiago" };
            WorldCity cityJAP = new WorldCity() { Lat = 35.683, Lon = 139.809, Country = "Japan", Name = "Tokyo" };
            WorldCity cityALT = new WorldCity() { Lat = 33.795, Lon = -84.349, Country = "US", Name = "Atlanta" };
            WorldCity cityJOH = new WorldCity() { Lat = -26.178, Lon = 28.004, Country = "South Africa", Name = "Johannesburg" };
            WorldCity cityNYC = new WorldCity() { Lat = 40.750, Lon = -74.0999, Country = "US", Name = "New York" };
            WorldCity citySNG = new WorldCity() { Lat = 1.229, Lon = 104.177, Country = "Singapore", Name = "Singapore" };
            WorldCity cityMOS = new WorldCity() { Lat = 55.750, Lon = 37.700, Country = "Russia", Name = "Moscow" };
            WorldCity cityROM = new WorldCity() { Lat = 41.880, Lon = 12.520, Country = "Italy", Name = "Roma" };
            WorldCity cityLAX = new WorldCity() { Lat = 34.000, Lon = -118.25, Country = "US", Name = "Los Angeles" };
    
            this.DataSource = new List<FlightInfo>() {
                new FlightInfo() { Origin = cityDAL, Dest = citySNG, Color = "Green" },
                new FlightInfo() { Origin = cityMOS, Dest = cityNZL, Color = "Red" },
                new FlightInfo() { Origin = cityCHL, Dest = cityJAP, Color = "Blue" },
                new FlightInfo() { Origin = cityPAN, Dest = cityROM, Color = "Orange" },
                new FlightInfo() { Origin = cityALT, Dest = cityJOH, Color = "Black" },
                new FlightInfo() { Origin = cityNYC, Dest = cityQTR, Color = "Purple" },
                new FlightInfo() { Origin = cityLAX, Dest = citySYD, Color = "Gray" },
            };
        }
    
        public class WorldCity
        {
            public string Name { get; set; }
            public double Lat { get; set; }
            public double Lon { get; set; }
            public double Pop { get; set; }
            public string Country { get; set; }
            public bool Cap { get; set; }
        }
    
        public class FlightInfo
        {
            public string ID { get; set; }
            public WorldCity Origin { get; set; }
            public WorldCity Dest { get; set; }
            public double Time { get; set; }
            public double Passengers { get; set; }
            public double Distance { get; set; }
            public List<List<Point>> Points { get; set; }
            public string Color { get; set; }
        }
    }
    razor

    Referencias de API