Blazor 地理ポリライン マップ

Blazor マップ コンポーネントでは、IgbGeographicPolylineSeries を使用して、地理的コンテキストでポリラインを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市または空港などの地理的位置間の道路または接続を描画するためにしばしば使用されます。

Blazor 地理ポリライン マップの例

IgbGeographicPolylineSeries は、IgbGeographicShapeSeries とよく似ていますが、地理空間データがポリゴンではなくポリラインでレンダリングされる点が異なります。

データ要件

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

コード スニペット

以下のコードは、IgbShapefileRecord を使用してシェイプ ファイルからロードした都市の場所に IgbGeographicPolylineSeries をバインドする方法を示します。

@using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicPolylineSeries Outline="Red" ShapefileDataSource="DataSource" />
</IgbGeographicMap>

@code {

    public IgbShapeDataSource DataSource;

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

API リファレンス