Blazor Binding Geographic Data Models

    O componente de mapa Ignite UI for Blazor foi projetado para exibir dados geoespaciais de arquivos de forma e/ou localizações geográficas de modelos de dados em mapas de imagens geográficas. A DataSource propriedade de série geográfica é usada com a finalidade de associação a modelos de dados. Essa propriedade pode ser associada a uma matriz de objetos personalizados.

    Blazor Binding Geographic Data Models Example

    A tabela a seguir resumiu as estruturas de dados necessárias para cada tipo de série geográfica:

    Séries Geográficas Propriedades Descrição
    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 nomes de 2 coordenadas numéricas de longitude e latitude e 1 coluna numérica para triangulação de valores
    IgbGeographicContourLineSeries LongitudeMemberPath, LatitudeMemberPath, ValueMemberPath Especifica nomes de 2 coordenadas numéricas de longitude e latitude e 1 coluna numérica para triangulação de valores
    IgbGeographicShapeSeries ShapeMemberPath Especifica o nome da coluna de dados dosDataSource itens que contém os pontos geográficos das formas. Essa propriedade deve ser mapeada para uma matriz de matrizes de objetos com propriedades x e y.
    IgbGeographicPolylineSeries ShapeMemberPath Especifica o nome da coluna de dados dosDataSource itens que contém as coordenadas geográficas das linhas. Essa propriedade deve ser mapeada para uma matriz de matrizes de objetos com propriedades x e y.

    Code Snippet

    O código a seguir mostra como associar o IgbGeographicSymbolSeries a um modelo de dados personalizado que contém localizações geográficas de algumas cidades do mundo armazenadas usando coordenadas de longitude e latitude. Além disso, usamos o para traçar o IgbGeographicPolylineSeries caminho geográfico mais curto entre esses locais usando o 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; }
    }
}

    API References