Web Components 地理高密度マップ

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

    Web Components 地理高密度マップの例

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

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

    データ要件

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

    データ バインディング

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

    プロパティ タイプ 概要
    ItemsSource any 項目ソースを取得または設定します。
    longitudeMemberPath 経度値が割り当てられた項目上の位置を決定するには ItemsSource プロパティを使用します。
    latitudeMemberPath string 緯度値が割り当てられた項目上の位置を決定するには ItemsSource プロパティを使用します。

    熱色スケール

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

    プロパティ タイプ 概要
    heatMinimum カラー スケールの最小端を表す double 値を定義します。
    heatMaximum カラー スケールの最大端を表す double 値を定義します。
    heatMinimumColor Color カラー スケールの下端で使用するポイント密度カラーを定義します。
    heatMaximumColor Color カラー スケールの上端で使用するポイント密度カラーを定義します。

    コード例

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

    <igc-geographic-map id="geoMap" width="100%" height="100%">
    
    </igc-geographic-map>
    
    import { IgcGeographicHighDensityScatterSeriesComponent } from 'igniteui-webcomponents-maps';
    //...
    connectedCallback() {
        this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
        const url = "../data/Places.csv";
    
        fetch(url)
            .then((response) => response.text())
            .then(data => this.onDataLoaded(data));
    }
    
    onDataLoaded(csvData: string) {
        const csvLines = csvData.split("\n");
        const geoLocations: any[] = [];
    
        for (let i = 1; i < csvLines.length; i++) {
            const columns = csvLines[i].split(",");
            const location = {
                latitude:  Number(columns[2]),
                longitude: Number(columns[1]),
                name:  columns[0]
            };
            geoLocations.push(location);
        }
    
        // creating HD series with loaded data
        const geoSeries = new IgcGeographicHighDensityScatterSeriesComponent();
        geoSeries.dataSource = geoLocations;
        geoSeries.longitudeMemberPath = "longitude";
        geoSeries.latitudeMemberPath = "latitude";
        geoSeries.heatMaximumColor = "Red";
        geoSeries.heatMinimumColor = "Black";
        geoSeries.heatMinimum = 0;
        geoSeries.heatMaximum = 5;
        geoSeries.pointExtent = 1;
        // adding HD series to the geographic amp
        this.geoMap.series.add(geoSeries);
    }
    

    API リファレンス