Mapa de burbujas geográficas Blazor

En el componente de mapa Blazor, puede usar IgbGeographicProportionalSymbolSeries para trazar burbujas o marcadores proporcionales en las ubicaciones geográficas especificadas por los datos de su aplicación. Esta serie de mapas puede resultar útil para resaltar puntos de interés en su caso de negocio particular, como grandes almacenes, almacenes u oficinas. También puede utilizar esta serie de mapas en un sistema de gestión de flotas o en un sistema GPS para seguimiento dinámico de vehículos.

Blazor Geographic Bubble Map Example

La demostración anterior muestra la serie IgbGeographicProportionalSymbolSeries y cómo especificar las opciones de enlace de datos de la serie. La selección automática de marcadores se configura junto con la lógica para evitar colisiones de marcadores, y también se especifican el contorno del marcador y los colores de relleno.

Configuration Summary

Al igual que otros tipos de series de dispersión en el control de mapa, la serie IgbGeographicProportionalSymbolSeries 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. La configuración RadiusScale y RadiusMemberPath configurará el radio de las burbujas.

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.
`RadiusMemberPath`	cadena	Establece la ruta que se utilizará para obtener los valores de radio de la serie.
`RadiusScale`	`IgbSizeScale`	Obtiene o establece la propiedad de escala de radio para la serie de burbujas actual.
`MinimumValue`	cualquier	Configure el valor mínimo para calcular los subrangos de valores.
`MaximumValue`	cualquier	Configure el valor máximo para calcular los subrangos de valores.

Code Snippet

@using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicProportionalSymbolSeries DataSource="WorldCities"
        MarkerType="MarkerType.Circle"
        RadiusScale="SeriesSizeScale"
        FillScale="ColorScale"
        FillMemberPath="Pop"
        RadiusMemberPath="Pop"
        LatitudeMemberPath="Lat"
        LongitudeMemberPath="Lon"
        MarkerOutline="rgba(0,0,0,0.3)" />
</IgbGeographicMap>

@code {

    private List<WorldCity> WorldCities;
    private SizeScale SeriesSizeScale;
    private ValueBrushScale ColorScale;

    protected override void OnInitialized()
    {
        this.WorldCities = WorldLocations.GetAll();

        this.SeriesSizeScale = new SizeScale()
        {
            MinimumValue = 4,
            MaximumValue = 60
        };

        this.ColorScale = new ValueBrushScale()
        {
            Brushes = "rgba(14, 194, 14, 0.4), rgba(252, 170, 32, 0.4), rgba(252, 32, 32, 0.4)",
            MinimumValue = 0,
            MaximumValue = 30
        };
    }
}

Mapa de burbujas geográficas Blazor

Blazor Geographic Bubble Map Example

Configuration Summary

Code Snippet

API References