Blazor Binding and Overlaying Multiple Shape Files

In the Ignite UI for Blazor map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, IgbGeographicSymbolSeries for plotting geographic locations of ports, the IgbGeographicPolylineSeries for plotting routes between ports, and the IgbGeographicShapeSeries for plotting shapes of countries.

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