Blazor 複数のシェイプファイルのバインドとオーバーレイ

Ignite UI for Blazor マップでは、複数の地理的シリーズオブジェクトを追加して、複数のシェープファイルを地理空間データでオーバーレイすることができます。たとえば、港湾の地理的位置をプロットするための IgbGeographicSymbolSeries、港湾間のルートをプロットするための IgbGeographicPolylineSeries、国の形状をプロットするための IgbGeographicShapeSeries などがあります。

Blazor 複数のシェイプファイルのバインドとオーバーレイの例

このトピックでは、マップコンポーネントに複数の地理的シリーズを表示する方法について段階的に説明します。すべての地理的シリーズは、IgbShapeDataSource クラスを使用して形状ファイルからロードされた地理空間データに従ってプロットします。IgbShapeDataSource オブジェクトの詳細については、シェープファイルのバインディングのトピックを参照してください。

IgbGeographicSymbolSeries – 主要都市の場所を表示します。
IgbGeographicPolylineSeries – 主要ポート間のルートを表示します。
IgbGeographicShapeSeries – 世界の国々の形を表示します。

目的のデータをプロットするために、地理的シリーズを上記の組み合わせまたは他の組み合わせで使用できます。

コンポーネントのインポート

まず、必要なコンポーネントとモジュールをインポートします。

// in Program.cs file

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

シリーズの作成

次に、後で異なるタイプのシェープファイルをロードする地理的シリーズでマップを作成します。

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

シェープファイルの読み込み

次に、ページのコンストラクターで、地理マップコンポーネントに表示する各シェープファイルの IgbShapeDataSource を追加します。

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

マップ背景

また形状ファイルがアプリケーションのために十分な地理的文脈 (国の形状など) を提供した際に、地図背景コンテンツで地理的画像を非表示にしたい場合があります。

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

概要

上記すべてのコードスニペットを以下のコードブロックにまとめて、プロジェクトに簡単にコピーできます。

@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 複数のシェイプ ファイルのバインドとオーバーレイ