Blazor 地理高密度マップ
Blazor マップ コンポーネントでは、IgbGeographicHighDensityScatterSeries
を使用して、非常に少ないロード時間で、数百から数百万のデータ ポイントを持つ散布図データをバインドして表示できます。
Blazor 地理高密度マップの例
上記のサンプルは、オーストラリアの人口密度を表す何百、何千ものデータ ポイントにバインドされた IgbGeographicHighDensityScatterSeries
シリーズをマップ コンポーネントで示しています。大量のデータ ポイントを含むマップのプロット領域は凝縮された赤色のピクセルによって表します。少量のデータ ポイントを含む領域は青色のピクセルによって表します。
相当数のデータ ポイントがあるため、シリーズではフルサイズのマーカーに対して散布データを小さな点として表示し、領域にはデータ ポイントの集合を表す高い色密度を使用した大半のデータを表示します。
データ要件
マップ コントロールの他のタイプの散布図シリーズと同様に、IgbGeographicHighDensityScatterSeries
シリーズには、オブジェクトの配列にバインドできる DataSource
プロパティがあります。また、項目ソースの各項目は、地理経度および緯度を表す 2 つのデータ列があります。LongitudeMemberPath
と LatitudeMemberPath
プロパティを使用してこのデータ列をマップします。
データ バインディング
以下の表に、データ バインドに使用される GeographicHighDensityScatterSeries シリーズのプロパティをまとめています。
プロパティ | タイプ | 概要 |
---|---|---|
DataSource |
any | 項目ソースを取得または設定します。 |
LongitudeMemberPath |
経度値が割り当てられた項目上の位置を決定するには ItemsSource プロパティを使用します。 | |
LatitudeMemberPath |
string | 緯度値が割り当てられた項目上の位置を決定するには ItemsSource プロパティを使用します。 |
熱色スケール
熱色スケールは、シリーズ内のカラー パターンを決定するオプションの機能です。以下の表は、カラー スケールを決定するために使用するプロパティをまとめたものです。
プロパティ | タイプ | 概要 |
---|---|---|
HeatMinimum |
カラー スケールの最小端を表す double 値を定義します。 | |
HeatMaximum |
カラー スケールの最大端を表す double 値を定義します。 | |
HeatMinimumColor |
Color | カラー スケールの下端で使用するポイント密度カラーを定義します。 |
HeatMaximumColor |
Color | カラー スケールの上端で使用するポイント密度カラーを定義します。 |
コード例
以下のコードは、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; }
}
}