Mapa geográfico de alta densidad Blazor

En el componente de mapa Blazor, puede utilizar IgbGeographicHighDensityScatterSeries para vincular y mostrar datos dispersos que van desde cientos hasta millones de puntos de datos que requieren un tiempo de carga extremadamente corto.

Blazor Geographic High Density Map Example

La demostración anterior muestra la serie IgbGeographicHighDensityScatterSeries en el componente de mapa vinculada a cientos o incluso miles de puntos de datos que representan la densidad de población de Australia. El área de trazado del mapa con puntos de datos más densamente poblados se representa como coalescencias de píxeles rojos y puntos de datos distribuidos libremente mediante píxeles azules discretos.

Debido a que hay tantos puntos de datos, la serie muestra los datos dispersos como puntos pequeños en lugar de marcadores de tamaño completo, y muestra las áreas con la mayor cantidad de datos utilizando una mayor densidad de color que representa un grupo de puntos de datos.

Data Requirements

Al igual que otros tipos de series de dispersión en el control de mapa, la serie IgbGeographicHighDensityScatterSeries tiene la propiedad DataSource que se puede vincular a una matriz de objetos. Además, cada elemento de datos en el origen de elementos debe tener dos columnas de datos que almacenen coordenadas geográficas de longitud y latitud y utilice las propiedades LongitudeMemberPath y LatitudeMemberPath para asignar estas columnas de datos.

Data Binding

La siguiente tabla resume las propiedades de la serie GeographicHighDensityScatterSeries utilizadas para el enlace de datos.

Propiedad	Tipo	Descripción
`DataSource`	cualquier	Obtiene o establece el origen de los elementos.
`LongitudeMemberPath`	cadena	Utiliza la propiedad ItemsSource para determinar la ubicación de los valores de longitud en los elementos asignados.
`LatitudeMemberPath`	cadena	Utiliza la propiedad ItemsSource para determinar la ubicación de los valores de latitud en los elementos asignados.

Heat Color Scale

La Escala de colores térmicos, una característica opcional, determina el patrón de colores dentro de la serie. La siguiente tabla resume las propiedades utilizadas para determinar la escala de colores.

Propiedad	Tipo	Descripción
`HeatMinimum`	Doble	Define el valor doble que representa el extremo mínimo de la escala de colores.
`HeatMaximum`	Doble	Define el valor doble que representa el extremo máximo de la escala de colores.
`HeatMinimumColor`	Color	Define el color de densidad de puntos utilizado en el extremo inferior de la escala de colores.
`HeatMaximumColor`	Color	Define el color de densidad de puntos utilizado en el extremo superior de la escala de colores.

Code Example

El siguiente código demuestra cómo configurar las propiedades HeatMinimumColor y HeatMaximumColor de IgbGeographicHighDensityScatterSeries

@using IgniteUI.Blazor.Controls

@inject HttpClient Http

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicHighDensityScatterSeries DataSource="DataSource"
        LongitudeMemberPath="Lon"
        LatitudeMemberPath="Lat"
        HeatMaximumColor="Red"
        HeatMinimumColor="10"
        HeatMaximum="5"
        HeatMinimum="0"
        PointExtent="1"
        MouseOverEnabled="true" />
</IgbGeographicMap>

@code {

    private List<AusPlaceCsv> DataSource;
    private Rect GeoBounds;

    protected override async Task OnInitializedAsync()
    {
        string url = "https://static.infragistics.com/xplatform/data/AusPlaces.csv";

        string csv = await Http.GetStringAsync(url);

        string[] csvLines = csv.Split(Environment.NewLine);

        List<AusPlaceCsv> dataItems = new List<AusPlaceCsv>();

        for (int i = 1; i < csvLines.Length - 1; i++)
        {
            string[] columns = csvLines[i].Split(",");
            AusPlaceCsv location = new AusPlaceCsv()
            {
                Lat = double.Parse(columns[2]),
                Lon = double.Parse(columns[1]),
                Name = columns[0],
            };

            dataItems.Add(location);
        }

        this.DataSource = dataItems;

        await Task.Delay(1);
    }

    public class AusPlaceCsv
    {
        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; }
    }
}