React 地理バブル マップ
React マップ コンポーネントでは、IgrGeographicProportionalSymbolSeries
を使用して、アプリケーションのデータで指定された地理的位置にバブルまたは相対マーカーをプロットできます。このマップ シリーズは、百貨店、倉庫、オフィスなど、特定のビジネス ケースに応じたポイントを強調表示する場合に役立ちます。また、動的な車両追跡のためにフリート管理システムまたは GPS システムでこの地図シリーズを使用することができます。
React 地理バブル マップの例
上記のデモは、IgrGeographicProportionalSymbolSeries
シリーズと、シリーズのデータバインディングオプションを指定する方法を示しています。予定表連動マーカー選択は、マーカー競合回避ロジックと合わせて構成され、マーカー アウトラインと塗りつぶしの色も指定されます。
構成の概要
マップコントロールの他のタイプの散布シリーズと同様に、IgrGeographicProportionalSymbolSeries
シリーズには、オブジェクトの配列にバインドできる ItemsSource
プロパティがあります。また、項目ソースの各項目は、地理経度および緯度を表す 2 つのデータ列があります。longitudeMemberPath
と latitudeMemberPath
プロパティを使用してこのデータ列をマップします。radiusScale
と radiusMemberPath
は、バブルの半径を設定します。
以下の表に、データ バインドに使用される GeographicHighDensityScatterSeries シリーズのプロパティをまとめています。
プロパティ | タイプ | 概要 |
---|---|---|
ItemsSource |
any | 項目のソースを取得または設定します |
longitudeMemberPath |
string | ItemsSource プロパティを使用して、割り当てられた商品の経度の値の場所を特定します。 |
latitudeMemberPath |
string | ItemsSource プロパティを使用して、割り当てられた商品の緯度値の場所を決定します。 |
radiusMemberPath |
string | シリーズの半径値を取得するために使用するパスを設定します。 |
radiusScale |
IgrSizeScale |
現在のバブル シリーズの半径スケール プロパティを取得または設定します。 |
minimumValue |
any | 値のサブ範囲を計算するための最小値を設定します。 |
maximumValue |
any | 値のサブ範囲を計算するための最大値を設定します。 |
コード スニペット
import { IgrGeographicMapModule } from 'igniteui-react-maps';
import { IgrGeographicMap } from 'igniteui-react-maps';
import { IgrGeographicProportionalSymbolSeries } from 'igniteui-react-maps';
import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';
import { IgrValueBrushScale } from 'igniteui-react-charts';
import { IgrSizeScale } from 'igniteui-react-charts';
import { IgrDataContext } from 'igniteui-react-core';
import { MarkerType } 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.map = map;
const sizeScale = new IgrSizeScale({});
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 IgrValueBrushScale({});
brushScale.brushes = brushes;
brushScale.minimumValue = 0;
brushScale.maximumValue = 30;
const geoSeries = new IgrGeographicProportionalSymbolSeries ( { name: "symbolSeries" });
geoSeries.dataSource = locations;
geoSeries.markerType = MarkerType.Circle;
geoSeries.radiusScale = sizeScale;
geoSeries.fillScale = brushScale;
geoSeries.fillMemberPath = "pop";
geoSeries.radiusMemberPath = "pop";
geoSeries.latitudeMemberPath = "lat";
geoSeries.longitudeMemberPath = "lon";
geoSeries.markerOutline = "rgba(0,0,0,0.3)";
this.map.series.add(geoSeries);
}