React 地理バブル マップ

React マップ コンポーネントでは、IgrGeographicProportionalSymbolSeries を使用して、アプリケーションのデータで指定された地理的位置にバブルまたは相対マーカーをプロットできます。このマップ シリーズは、百貨店、倉庫、オフィスなど、特定のビジネス ケースに応じたポイントをハイライト表示する場合に役立ちます。また、動的な車両追跡のためにフリート管理システムまたは GPS システムでこの地図シリーズを使用することができます。

React 地理バブル マップの例

上記のデモは、IgrGeographicProportionalSymbolSeries シリーズと、シリーズのデータ​​バインディングオプションを指定する方法を示しています。予定表連動マーカー選択は、マーカー競合回避ロジックと合わせて構成され、マーカー アウトラインと塗りつぶしの色も指定されます。

構成の概要

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

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

コード スニペット

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);
}

API リファレンス