Blazor Binding and Overlaying Multiple Shape Files

En la Ignite UI for Blazor, puede agregar varios objetos de series geográficas para superponer algunos shapefiles con datos geoespaciales. Por ejemplo, IgbGeographicSymbolSeries para trazar ubicaciones geográficas de puertos, IgbGeographicPolylineSeries para trazar rutas entre puertos e IgbGeographicShapeSeries para trazar formas de países.

Blazor Binding and Overlaying Multiple Shape Files Example

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbGeographicMapModule),
                typeof(IgbDataChartInteractivityModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
            <IgbGeographicShapeSeries ShapefileDataSource="AsiaShape" Outline="Black" Thickness="1" Brush="#d10700" />
            <IgbGeographicShapeSeries ShapefileDataSource="EuropeShape" Outline="Black" Thickness="1" Brush="#04b530" />
            <IgbGeographicShapeSeries ShapefileDataSource="AmericanShape" Outline="Black" Thickness="1" Brush="#0073d1" />
        </IgbGeographicMap>
    </div>
</div>

@code {

    private IgbShapeDataSource AsiaShape;
    private IgbShapeDataSource EuropeShape;
    private IgbShapeDataSource AmericanShape;

    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"
        };

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

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Este tema lo lleva paso a paso para mostrar múltiples series geográficas en el componente de mapa. Todas las series geográficas se trazan siguiendo datos geoespaciales cargados desde archivos de formas utilizando la clase IgbShapeDataSource. Consulte el tema Vincular archivos de formas para obtener más información sobre el objeto IgbShapeDataSource.

IgbGeographicSymbolSeries: muestra ubicaciones de las principales ciudades
IgbGeographicPolylineSeries: muestra rutas entre los principales puertos
IgbGeographicShapeSeries: muestra formas de 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)
);
razor

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>
razor

Loading Shapefiles

A continuación, en el constructor de su página, agregue un IgbShapeDataSource para cada archivo de forma que desee mostrar en el componente del 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"
    };
}
razor

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"/>
razor

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"
        };
    }
}
razor

Blazor Binding and Overlaying Multiple Shape Files