Blazor 地理バブルマップ

Blazor マップコンポーネントでは、IgbGeographicProportionalSymbolSeries を使用して、アプリケーションのデータで指定された地理的位置にバブルまたは相対マーカーをプロットできます。このマップシリーズは、百貨店、倉庫、オフィスなど、特定のビジネスケースに応じたポイントをハイライト表示する場合に役立ちます。また、動的な車両追跡のためにフリート管理システムまたは GPS システムでこの地図シリーズを使用することができます。

Blazor 地理バブルマップの例

上記のデモは、IgbGeographicProportionalSymbolSeries シリーズと、シリーズのデータバインディングオプションを指定する方法を示しています。予定表連動マーカー選択は、マーカー競合回避ロジックと合わせて構成され、マーカーアウトラインと塗りつぶしの色も指定されます。

構成の概要

マップコントロールの他のタイプの散布シリーズと同様に、IgbGeographicProportionalSymbolSeries シリーズには、オブジェクトの配列にバインドできる DataSource プロパティがあります。また、項目ソースの各項目は、地理経度および緯度を表す 2 つのデータ列があります。LongitudeMemberPath と LatitudeMemberPath プロパティを使用してこのデータ列をマップします。RadiusScale と RadiusMemberPath は、バブルの半径を設定します。

以下の表に、データバインドに使用される GeographicHighDensityScatterSeries シリーズのプロパティをまとめています。

プロパティ	タイプ	概要
`DataSource`	any	項目のソースを取得または設定します
`LongitudeMemberPath`	string	ItemsSource プロパティを使用して、割り当てられた商品の経度の値の場所を特定します。
`LatitudeMemberPath`	string	ItemsSource プロパティを使用して、割り当てられた商品の緯度値の場所を決定します。
`RadiusMemberPath`	string	シリーズの半径値を取得するために使用するパスを設定します。
`RadiusScale`	`IgbSizeScale`	現在のバブルシリーズの半径スケールプロパティを取得または設定します。
`MinimumValue`	any	値のサブ範囲を計算するための最小値を設定します。
`MaximumValue`	any	値のサブ範囲を計算するための最大値を設定します。

コードスニペット

@using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicProportionalSymbolSeries DataSource="WorldCities"
        MarkerType="MarkerType.Circle"
        RadiusScale="SeriesSizeScale"
        FillScale="ColorScale"
        FillMemberPath="Pop"
        RadiusMemberPath="Pop"
        LatitudeMemberPath="Lat"
        LongitudeMemberPath="Lon"
        MarkerOutline="rgba(0,0,0,0.3)" />
</IgbGeographicMap>

@code {

    private List<WorldCity> WorldCities;
    private SizeScale SeriesSizeScale;
    private ValueBrushScale ColorScale;

    protected override void OnInitialized()
    {
        this.WorldCities = WorldLocations.GetAll();

        this.SeriesSizeScale = new SizeScale()
        {
            MinimumValue = 4,
            MaximumValue = 60
        };

        this.ColorScale = new ValueBrushScale()
        {
            Brushes = "rgba(14, 194, 14, 0.4), rgba(252, 170, 32, 0.4), rgba(252, 32, 32, 0.4)",
            MinimumValue = 0,
            MaximumValue = 30
        };
    }
}

Blazor 地理バブル マップ