Blazor 地理ポリゴンマップ

Blazor マップコンポーネントでは、IgbGeographicShapeSeries を使用して、地理的コンテキストで形状ポリゴンを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、地理的位置で定義される国々または領域の図形を描画するためにしばしば使用されます。

Blazor 地理ポリゴンマップの例

IgbGeographicShapeSeries は、地理空間データがポリラインではなくポリゴンでレンダリングされる以外、IgbGeographicPolylineSeries とほとんど同じです。

データ要件

マップコントロールの他の種類の地理的シリーズと同様に、IgbGeographicShapeSeries には、オブジェクトの配列にバインドできる DataSource プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、ShapeMemberPath プロパティにマップされます。IgbGeographicShapeSeries は、マップされたデータ列の点を使用してマップコントロールにポリゴンをプロットします。

コードスニペット

以下のコードは、IgbShapeDataSource を使用してシェイプファイルからロードした世界の国々の図形に IgbGeographicShapeSeries をバインドする方法を示します。

@using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <GeographicShapeSeries ShapefileDataSource="DataSource"/>
</IgbGeographicMap>

@code {

    public IgbShapeDataSource DataSource;

    protected override void OnInitialized()
    {
        this.DataSource = new IgbShapeDataSource()
        {
            ShapefileSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.shp",
            DatabaseSource = "https://static.infragistics.com/xplatform/shapes/WorldCountries.dbf"
        };
    }
}

Blazor 地理ポリゴン マップ