React 地理高密度マップ

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

React 地理高密度マップの例

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

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

データ要件

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

データバインディング

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

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

熱色スケール

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

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

コード例

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


import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicHighDensityScatterSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';

IgrGeographicMapModule.register();
IgrDataChartInteractivityModule.register();
// ...

public render() {
    return (
    <IgrGeographicMap
        ref={this.onMapReferenced}
        width="600px"
        height="600px"
        zoomable="true" />
    );
}

public onMapReferenced(map: IgrGeographicMap) {
    this.geoMap = map;
}

public componentDidMount() {
    // fetching geographic locations from public folder or URL
    fetch("Data/AusPlaces.json")
        .then((response) => response.json())
        .then(data => this.onDataLoaded(data));
}

public onDataLoaded(geoLocations: any[]) {

    const geoSeries = new IgrGeographicHighDensityScatterSeries( { name: "hdSeries" });
    geoSeries.dataSource = geoLocations;
    geoSeries.longitudeMemberPath = "x";
    geoSeries.latitudeMemberPath = "y";
    geoSeries.heatMaximumColor = "Red";
    geoSeries.heatMinimumColor = "Black";
    geoSeries.heatMinimum = 0;
    geoSeries.heatMaximum = 5;
    geoSeries.pointExtent = 1;
    geoSeries.mouseOverEnabled = true;

    this.geoMap.series.add(geoSeries);
}

React 地理高密度マップ