Blazor 地理記号マップ

Blazor マップ コンポーネントでは、IgbGeographicSymbolSeries を使用して、地理的コンテキストでポイントまたはマーカーを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市、空港、地震または興味のあるポイントなどの地理的位置のコレクションを描画するためにしばしば使用されます。

Blazor 地理記号マップの例

データ要件

マップコンポーネントの他の種類の地理的シリーズと同様に、IgbGeographicSymbolSeries には、オブジェクトの配列にバインドできる DataSource プロパティがあります。さらに、このオブジェクトの各データ項目は、地理的位置 (経度と緯度) を保存する 2 つの数値データ列を持つ必要があります。これらのデータ列は、LatitudeMemberPath および LongitudeMemberPath プロパティにマップされます。IgbGeographicSymbolSeries は、これらのマップされたデータ列の値を使用して、地理マップコンポーネントにシンボル要素をプロットします。

コード スニペット

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

@using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicSymbolSeries DataSource="Cities"
        MarkerType="MarkerType.Circle"
        LatitudeMemberPath="Lat"
        LongitudeMemberPath="Lon"
        MarkerBrush="White"
        MarkerOutline="Gray" />
    <IgbGeographicSymbolSeries DataSource="Capitals"
        MarkerType="MarkerType.Circle"
        LatitudeMemberPath="Lat"
        LongitudeMemberPath="Lon"
        MarkerBrush="White"
        MarkerOutline="rgb(32, 146, 252)" />
</IgbGeographicMap>

@code {

    private List<WorldCity> Cities;
    private List<WorldCity> Capitals;

    protected override void OnInitialized()
    {
        this.Cities = WorldLocations.GetCities();
        this.Capitals = WorldLocations.GetCapitals();
    }
}

API リファレンス