Blazor 地理ポリゴン マップ

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

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

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

データ要件

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

コード スニペット

以下のコードは、IgbShapefileRecord を使用してシェイプ ファイルからロードした世界の国々の図形に 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"
        };
    }
}

API リファレンス