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