Angular 地理高密度マップ
Angular マップ コンポーネントでは、IgxGeographicHighDensityScatterSeriesComponent
を使用して、非常に少ないロード時間で、数百から数百万のデータ ポイントを持つ散布図データをバインドして表示できます。
Angular 地理高密度マップの例
上記のサンプルは、オーストラリアの人口密度を表す何百、何千ものデータ ポイントにバインドされた IgxGeographicHighDensityScatterSeriesComponent
シリーズをマップ コンポーネントで示しています。大量のデータ ポイントを含むマップのプロット領域は凝縮された赤色のピクセルによって表します。少量のデータ ポイントを含む領域は青色のピクセルによって表します。
相当数のデータ ポイントがあるため、シリーズではフルサイズのマーカーに対して散布データを小さな点として表示し、領域にはデータ ポイントの集合を表す高い色密度を使用した大半のデータを表示します。
データ要件
マップ コントロールの他のタイプの散布図シリーズと同様に、IgxGeographicHighDensityScatterSeriesComponent
シリーズには、オブジェクトの配列にバインドできる ItemsSource
プロパティがあります。また、項目ソースの各項目は、地理経度および緯度を表す 2 つのデータ列があります。longitudeMemberPath
と latitudeMemberPath
プロパティを使用してこのデータ列をマップします。
データ バインディング
以下の表に、データ バインドに使用される GeographicHighDensityScatterSeries シリーズのプロパティをまとめています。
プロパティ | タイプ | 概要 |
---|---|---|
ItemsSource |
any | 項目ソースを取得または設定します。 |
longitudeMemberPath |
経度値が割り当てられた項目上の位置を決定するには ItemsSource プロパティを使用します。 | |
latitudeMemberPath |
string | 緯度値が割り当てられた項目上の位置を決定するには ItemsSource プロパティを使用します。 |
熱色スケール
熱色スケールは、シリーズ内のカラー パターンを決定するオプションの機能です。以下の表は、カラー スケールを決定するために使用するプロパティをまとめたものです。
プロパティ | タイプ | 概要 |
---|---|---|
heatMinimum |
カラー スケールの最小端を表す double 値を定義します。 | |
heatMaximum |
カラー スケールの最大端を表す double 値を定義します。 | |
heatMinimumColor |
Color | カラー スケールの下端で使用するポイント密度カラーを定義します。 |
heatMaximumColor |
Color | カラー スケールの上端で使用するポイント密度カラーを定義します。 |
コード例
以下のコードは、IgxGeographicHighDensityScatterSeriesComponent
の heatMinimumColor
と heatMaximumColor
プロパティを設定する方法を示します。
<div className="sampleRoot" >
<igx-geographic-map #map
width="700px"
height="500px"
zoomable="true" >
</igx-geographic-map>
</div>
<ng-template let-series="series" let-item="item" #template>
<div>
<span>
{{item.n}}
</span>
</div>
</ng-template>
import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicHighDensityScatterSeriesComponent } from 'igniteui-angular-maps';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { WorldUtils } from "../../utilities/WorldUtils";
@Component({
selector: "app-map-geographic-scatter-density-series",
styleUrls: ["./map-geographic-scatter-density-series.component.scss"],
templateUrl: ".map-geographic-scatter-density-series.component.html"
})
export class MapTypeScatterDensitySeriesComponent implements AfterViewInit {
@ViewChild ("map")
public map: IgxGeographicMapComponent;
@ViewChild("template")
public tooltip: TemplateRef<object>;
public geoLocations;
constructor() {
}
public ngAfterViewInit(): void {
// fetching geographic locations from public JSON folder
fetch("assets/Data/AusPlaces.json")
.then((response) => response.json())
.then((data) => this.onDataLoaded(data, ""));
}
public onDataLoaded(sds: IgxShapeDataSource, e: any) {
this.geoLocations = sds;
// creating HD series with loaded data
const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent();
geoSeries.dataSource = sds;
geoSeries.longitudeMemberPath = "x";
geoSeries.latitudeMemberPath = "y";
geoSeries.heatMaximumColor = "Red";
geoSeries.heatMinimumColor = "Black";
geoSeries.heatMinimum = 0;
geoSeries.heatMaximum = 5;
geoSeries.pointExtent = 1;
geoSeries.tooltipTemplate = this.tooltip;
geoSeries.mouseOverEnabled = true;
// adding HD series to the geographic amp
this.map.series.add(geoSeries);
// zooming to bound of all geographic locations
const geoBounds = WorldUtils.getBounds(this.geoLocations);
geoBounds.top = 0;
geoBounds.height = -50;
this.map.zoomToGeographic(geoBounds);
}
}
API リファレンス
IgxGeographicHighDensityScatterSeriesComponent
IgxGeographicHighDensityScatterSeriesComponent
heatMaximumColor
heatMinimumColor
ItemsSource
latitudeMemberPath
longitudeMemberPath