Premium

Blazor 地理エリアマップ

Blazor マップコンポーネントでは、IgbGeographicScatterAreaSeries を使用して、各ポイントに割り当てられた数値を持つ経度と緯度のデータの三角形分割に基づいて、地理的背景で色付きの表面を描画できます。このタイプの地理的シリーズは、気象温度、降水量、人口分布、大気汚染などの地理的位置によって定義される散乱データのレンダリングに使用できます。

Blazor 地理エリアマップの例

IgbGeographicScatterAreaSeries は IgbGeographicContourLineSeries と同様ですが、同じ値を持つデータポイントを接続する等線の置換に補完で色つきサーフェスエリアとしてデータを表します。

データ要件

マップコンポーネントの他の種類の地理的シリーズと同様に、IgbGeographicScatterAreaSeries には、オブジェクトの配列にバインドできる ItemsSource プロパティがあります。さらに、項目ソースの各項目にはデータ列が 3 つあり、2 つは地理的な経度および緯度座標を保管し、1 つのデータ列は地理的位置に関連した値を保管します。地理的シリーズの LongitudeMemberPath、LatitudeMemberPath および ColorMemberPath プロパティはこれらのデータ列を識別します。 IgbGeographicScatterAreaSeries は、三角測量が TrianglesSource プロパティに設定されていない場合、ItemsSource の項目で組み込みのデータ三角測量を自動的に実行します。ただし、三角測量の計算は非常に時間のかかるプロセスであるため、このプロパティのために TriangulationSource を指定すると、ランタイムパフォーマンスがよくなります。特にデータ項目が多数ある場合には顕著です。

データバインディング

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

プロパティ名	プロパティ型	説明
`ItemsSource`	任意	`TrianglesSource` プロパティが三角測量データを提供しない場合に三角測量を実行するデータ項目のソースです。
`LongitudeMemberPath`	文字列	`ItemsSource` にバインドされているすべての項目の経度を含むプロパティの名前。
`LatitudeMemberPath`	文字列	`ItemsSource` にバインドされているすべての項目の Latitude を含むプロパティの名前。
`ColorMemberPath`	文字列	各データ項目の緯度および経度座標の値を含むプロパティの名前。`ColorScale` プロパティが設定されている場合、この数値は色に変換されます。
`TrianglesSource`	任意	三角測量データのソース。`TriangulationSource` オブジェクトの Triangles をこのプロパティに設定すると、ランタイムパフォーマンスと地理的シリーズの描画の両方が改善します。
`TriangleVertexMemberPath1`	文字列	各三角形に対して ItemsSource の最初の頂点のインデックスを含む、`TrianglesSource` 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。
`TriangleVertexMemberPath2`	文字列	各三角形に対して ItemsSource の最初の頂点のインデックスを含む、`TrianglesSource` 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。
`TriangleVertexMemberPath3`	文字列	各三角形に対して ItemsSource の最初の頂点のインデックスを含む、`TrianglesSource` 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。

カラースケール

IgbGeographicScatterAreaSeries の ColorScale プロパティを使用して、ポイントの色の値を解決し、地理的シリーズの面を塗りつぶします。色は、ピクセル単位の三角ラスタライザーを三角測量データに適用することによって、サーフェスの図形の周りをなめらかに補間します。サーフェスの描画がピクセル単位であるため、カラースケールはブラシではなく色を使用します。提供される IgbCustomPaletteColorScale クラスはほとんどのカラーリングのニーズを満たすはずですが、ColorScale ベースのクラスはカスタムのカラリングロジックのアプリケーションによって継承できます。

以下の表は GeographicScatterAreaSeries の面のカラリングに影響する IgbCustomPaletteColorScale プロパティをリストします。

Property Name	Property Type	Description
`Palette`	`ObservableCollection<Color>`	Gets or sets the collection of colors to select from or to interpolate between.
`InterpolationMode`	`ColorScaleInterpolationMode`	Gets or sets the method getting a color from the Palette.
`MaximumValue`	double	The highest value to assign a color. Any given value greater than this value will be Transparent.
`MinimumValue`	double	The lowest value to assign a color. Any given value less than this value will be Transparent.

コードスニペット

以下のコードは、IgbGeographicScatterAreaSeries を世界の表面温度を表す三角測量データにバインドする方法を示しています。

@using IgniteUI.Blazor.Controls


<IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
    <IgbGeographicScatterAreaSeries LongitudeMemberPath="Lon"
        LatitudeMemberPath="Lat"
        ColorMemberPath="Value"
        ColorScale="ColorScale"
        DataSource="Data">
    </IgbGeographicScatterAreaSeries>
</IgbGeographicMap>

@code {

    private List<Location> Data;
    private CustomPaletteColorScale ColorScale;

    protected override void OnInitialized()
    {
        var brushes = "";
        brushes += "rgba(32, 146, 252, 0.5) "; // semi-transparent blue
        brushes += "rgba(14, 194, 14, 0.5) ";  // semi-transparent green
        brushes += "rgba(252, 120, 32, 0.5) "; // semi-transparent orange
        brushes += "rgba(252, 32, 32, 0.5) ";  // semi-transparent red

        this.ColorScale = new CustomPaletteColorScale();
        this.ColorScale.Palette = brushes;
        this.ColorScale.MinimumValue = 0;
        this.ColorScale.MaximumValue = 30;

        this.Data = WorldTemperatures.Load();
    }
}

API リファレンス

IgbColorScale
IgbCustomPaletteColorScale
IgbGeographicContourLineSeries
IgbGeographicScatterAreaSeries

Blazor 地理エリア マップ