Web Components 地理バブル マップ
Web Components マップ コンポーネントでは、IgcGeographicProportionalSymbolSeriesComponent を使用して、アプリケーションのデータで指定された地理的位置にバブルまたは相対マーカーをプロットできます。このマップ シリーズは、百貨店、倉庫、オフィスなど、特定のビジネス ケースに応じたポイントをハイライト表示する場合に役立ちます。また、動的な車両追跡のためにフリート管理システムまたは GPS システムでこの地図シリーズを使用することができます。
Web Components 地理バブル マップの例
上記のデモは、IgcGeographicProportionalSymbolSeriesComponent シリーズと、シリーズのデータバインディングオプションを指定する方法を示しています。予定表連動マーカー選択は、マーカー競合回避ロジックと合わせて構成され、マーカー アウトラインと塗りつぶしの色も指定されます。
構成の概要
マップコントロールの他のタイプの散布シリーズと同様に、IgcGeographicProportionalSymbolSeriesComponent シリーズには、オブジェクトの配列にバインドできる ItemsSource プロパティがあります。また、項目ソースの各項目は、地理経度および緯度を表す 2 つのデータ列があります。longitudeMemberPath と latitudeMemberPath プロパティを使用してこのデータ列をマップします。radiusScale と radiusMemberPath は、バブルの半径を設定します。
以下の表に、データ バインドに使用される GeographicHighDensityScatterSeries シリーズのプロパティをまとめています。
| プロパティ | タイプ | 概要 |
|---|---|---|
ItemsSource |
any | 項目のソースを取得または設定します |
longitudeMemberPath |
string | ItemsSource プロパティを使用して、割り当てられた商品の経度の値の場所を特定します。 |
latitudeMemberPath |
string | ItemsSource プロパティを使用して、割り当てられた商品の緯度値の場所を決定します。 |
radiusMemberPath |
string | シリーズの半径値を取得するために使用するパスを設定します。 |
radiusScale |
IgcSizeScaleComponent |
現在のバブル シリーズの半径スケール プロパティを取得または設定します。 |
minimumValue |
any | 値のサブ範囲を計算するための最小値を設定します。 |
maximumValue |
any | 値のサブ範囲を計算するための最大値を設定します。 |
コード スニペット
<igc-geographic-map id="geoMap" width="100%" height="100%">
</igc-geographic-map>
import { IgcGeographicProportionalSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcValueBrushScaleComponent } from 'igniteui-webcomponents-charts';
import { IgcSizeScaleComponent } from 'igniteui-webcomponents-charts';
//...
connectedCallback() {
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.addSeriesWith(WorldLocations.getAll());
}
addSeriesWith(locations: any[])
{
const sizeScale = new IgcSizeScaleComponent();
sizeScale.minimumValue = 4;
sizeScale.maximumValue = 60;
const brushes = [
"rgba(14, 194, 14, 0.4)", // semi-transparent green
"rgba(252, 170, 32, 0.4)", // semi-transparent orange
"rgba(252, 32, 32, 0.4)", // semi-transparent red
];
const brushScale = new IgcValueBrushScaleComponent();
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const symbolSeries = new IgcGeographicProportionalSymbolSeriesComponent ();
symbolSeries.dataSource = locations;
symbolSeries.markerType = MarkerType.Circle;
symbolSeries.radiusScale = sizeScale;
symbolSeries.fillScale = brushScale;
symbolSeries.fillMemberPath = "pop";
symbolSeries.radiusMemberPath = "pop";
symbolSeries.latitudeMemberPath = "lat";
symbolSeries.longitudeMemberPath = "lon";
symbolSeries.markerOutline = "rgba(0,0,0,0.3)";
this.geoMap.series.add(symbolSeries);
}