React 地理バブル マップ

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

    React 地理バブル マップの例

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

    構成の概要

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

    以下の表に、データ バインドに使用される 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);
    }
    

    API リファレンス