Blazor Binding and Overlaying Multiple Shape Files

No mapa Ignite UI for Blazor, você pode adicionar vários objetos de série geográfica para sobrepor alguns shapefiles com dados geoespaciais. Por exemplo, IgbGeographicSymbolSeries para plotar localizações geográficas de portos, para IgbGeographicPolylineSeries plotar rotas entre portos e para IgbGeographicShapeSeries plotar formas de países.

Blazor Binding and Overlaying Multiple Shape Files Example

Este tópico mostra passo a passo a exibição de várias séries geográficas no componente de mapa. Todas as séries geográficas são plotadas seguindo dados geoespaciais carregados de arquivos de forma usando o IgbShapeDataSource classe. Consulte o Arquivos de forma de associação para obter mais informações sobre IgbShapeDataSource objeto.

IgbGeographicSymbolSeries– exibe a localização das principais cidades
IgbGeographicPolylineSeries– exibe rotas entre os principais portos
IgbGeographicShapeSeries– exibe formas de países do mundo

Você pode usar a série geográfica acima ou outras combinações para plotar os dados desejados.

Importing Components

Primeiro, vamos importar os componentes e módulos necessários:

// in Program.cs file

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

Creating Series

Em seguida, precisamos criar um mapa com algumas séries geográficas que posteriormente carregarão diferentes tipos de shapefile.

<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

Em seguida, no construtor da página, adicione um IgbShapeDataSource para cada shapefile que você deseja exibir no 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

Além disso, talvez você queira ocultar imagens geográficas do conteúdo de plano de fundo do mapa se seus arquivos de forma fornecerem contexto geográfico suficiente (por exemplo, forma de países) para seu aplicativo.

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

Summary

Para sua conveniência, todos os trechos de código acima são combinados em um bloco de código abaixo que você pode copiar facilmente para seu projeto.

@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