Blazor Binding and Overlaying Multiple Shape Files

No mapa Ignite UI for Blazor, você pode adicionar múltiplos objetos de séries geográficas para sobrepor alguns shapefiles com dados geoespaciais. Por exemplo,IgbGeographicSymbolSeries para plotar localizações geográficas de portos, paraIgbGeographicPolylineSeries traçar rotas entre portos, e paraIgbGeographicShapeSeries plotar formas de países.

Blazor Binding and Overlaying Multiple Shape Files Example

Este tópico leva você passo a passo para exibir múltiplas séries geográficas no componente de mapas. Todas as séries geográficas traçam gráficos seguindo dados geoespaciais carregados a partir de arquivos de formas usando aIgbShapeDataSource classe. Consulte o tópico Binding Shape Files para mais informações sobreIgbShapeDataSource objetos.

IgbGeographicSymbolSeries– exibe localizações das principais cidades
IgbGeographicPolylineSeries– exibe rotas entre portos principais
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 sua página, adicione umIgbShapeDataSource para cada shapefile que você deseja exibir no componente 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