Blazor Binding and Overlaying Multiple Shape Files

En el mapa Ignite UI for Blazor, puedes añadir varios objetos de serie geográfica para superponer algunos shapefiles con datos geoespaciales. Por ejemplo,IgbGeographicSymbolSeries para trazar ubicaciones geográficas de puertos, elIgbGeographicPolylineSeries para trazar rutas entre puertos, y elIgbGeographicShapeSeries para trazar formas de países.

Blazor Binding and Overlaying Multiple Shape Files Example

Este tema te guía paso a paso hacia la visualización de múltiples series geográficas en el componente del mapa. Todas las series geográficas se trazan siguiendo datos geoespaciales cargados desde archivos de formas usando laIgbShapeDataSource clase. Consulte el tema Enlazando Archivos de Forma para más información sobreIgbShapeDataSource el objeto.

IgbGeographicSymbolSeries– muestra ubicaciones de las principales ciudades
IgbGeographicPolylineSeries– muestra rutas entre los principales puertos
IgbGeographicShapeSeries– muestra las formas de los países del mundo

Puede utilizar las series geográficas anteriores u otras combinaciones para trazar los datos deseados.

Importing Components

Primero, importemos los componentes y módulos necesarios:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbGeographicMapModule),
    typeof(IgbDataChartInteractivityModule)
);

Creating Series

A continuación, necesitamos crear un mapa con algunas series geográficas que luego cargarán diferentes tipos de archivos de forma.

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicShapeSeries ShapefileDataSource="@AsiaShape" Outline="Black" Thickness="1" Brush="Red" />
    <IgbGeographicShapeSeries ShapefileDataSource="@EuropeShape" Outline="Black" Thickness="1" Brush="Purple" />
</IgbGeographicMap>

Loading Shapefiles

A continuación, en el constructor de tu página, añade unIgbShapeDataSource para cada archivo shapefile que quieras mostrar en el componente de mapa geográfico.

public IgbShapeDataSource AsiaShape;
public IgbShapeDataSource EuropeShape;

protected override void OnInitialized()
{
    this.AsiaShape = new IgbShapeDataSource()
    {
        ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.shp",
        DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.dbf"
    };

    this.EuropeShape = new IgbShapeDataSource()
    {
        ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.shp",
        DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.dbf"
    };
}

Map Background

Además, es posible que desee ocultar imágenes geográficas del contenido de fondo del mapa si sus archivos de forma proporcionaron suficiente contexto geográfico (por ejemplo, forma de países) para su aplicación.

<IgbGeographicMap Height="100%" Width="100%" BackgroundContent="@null"/>

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">
    <IgbGeographicShapeSeries ShapefileDataSource="AsiaShape" Outline="Black" Thickness="1" Brush="Red" />
    <IgbGeographicShapeSeries ShapefileDataSource="EuropeShape" Outline="Black" Thickness="1" Brush="Purple" />
</IgbGeographicMap>

@code {

    public IgbShapeDataSource AsiaShape;
    public IgbShapeDataSource EuropeShape;

    protected override void OnInitialized()
    {
        this.AsiaShape = new IgbShapeDataSource()
        {
            ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.shp",
            DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_asia.dbf"
        };

        this.EuropeShape = new IgbShapeDataSource()
        {
            ShapefileSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.shp",
            DatabaseSource = "https://static.infragistics.com/xplatform/shapes/world_region_europe.dbf"
        };
    }
}

Blazor Binding and Overlaying Multiple Shape Files