Blazor 地理エリア マップ

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

    Blazor 地理エリア マップの例

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

    データ要件

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

    データ バインディング

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

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

    カラー スケール

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

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

    プロパティ名 プロパティ型 説明
    Palette ObservableCollection 補間するために選択する色のコレクションを取得または設定します。
    InterpolationMode ColorScaleInterpolationMode Palette から色を取得するメソッドを取得または設定します。
    MaximumValue double 色を割り当てるための最大値。指定した値がこの値より大きい場合は透明になります。
    MinimumValue double 色を割り当てるための最小値。指定した値がこの値より小さい場合は透明になります。

    コード スニペット

    以下のコードは、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 リファレンス