Blazor 地理高密度マップ

Blazor マップ コンポーネントでは、IgbGeographicHighDensityScatterSeries を使用して、非常に少ないロード時間で、数百から数百万のデータ ポイントを持つ散布図データをバインドして表示できます。

Blazor 地理高密度マップの例

上記のサンプルは、オーストラリアの人口密度を表す何百、何千ものデータ ポイントにバインドされた IgbGeographicHighDensityScatterSeries シリーズをマップ コンポーネントで示しています。大量のデータ ポイントを含むマップのプロット領域は凝縮された赤色のピクセルによって表します。少量のデータ ポイントを含む領域は青色のピクセルによって表します。

相当数のデータ ポイントがあるため、シリーズではフルサイズのマーカーに対して散布データを小さな点として表示し、領域にはデータ ポイントの集合を表す高い色密度を使用した大半のデータを表示します。

データ要件

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

データ バインディング

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

熱色スケール

熱色スケールは、シリーズ内のカラー パターンを決定するオプションの機能です。以下の表は、カラー スケールを決定するために使用するプロパティをまとめたものです。

コード例

以下のコードは、IgbGeographicHighDensityScatterSeries の HeatMinimumColor と HeatMaximumColor プロパティを設定する方法を示します。

@using IgniteUI.Blazor.Controls

@inject HttpClient Http

<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicHighDensityScatterSeries DataSource="DataSource"
        LongitudeMemberPath="Lon"
        LatitudeMemberPath="Lat"
        HeatMaximumColor="Red"
        HeatMinimumColor="10"
        HeatMaximum="5"
        HeatMinimum="0"
        PointExtent="1"
        MouseOverEnabled="true" />
</IgbGeographicMap>

@code {

    private List<AusPlaceCsv> DataSource;
    private Rect GeoBounds;

    protected override async Task OnInitializedAsync()
    {
        string url = "https://static.infragistics.com/xplatform/data/AusPlaces.csv";

        string csv = await Http.GetStringAsync(url);

        string[] csvLines = csv.Split(Environment.NewLine);

        List<AusPlaceCsv> dataItems = new List<AusPlaceCsv>();

        for (int i = 1; i < csvLines.Length - 1; i++)
        {
            string[] columns = csvLines[i].Split(",");
            AusPlaceCsv location = new AusPlaceCsv()
            {
                Lat = double.Parse(columns[2]),
                Lon = double.Parse(columns[1]),
                Name = columns[0],
            };

            dataItems.Add(location);
        }

        this.DataSource = dataItems;

        await Task.Delay(1);
    }

    public class AusPlaceCsv
    {
        public string Name { get; set; }
        public double Lat { get; set; }
        public double Lon { get; set; }
        public double Pop { get; set; }
        public string Country { get; set; }
        public bool Cap { get; set; }
    }
}

API リファレンス