mapbox-gl-js - ログ サイズ スケールで HexagonLayer を作成する方法

Question

レンダリングして完全に機能する 3D レイヤーを作成しました。

彼の標高が、私が正しくやっていると思うすべてのボリュームの合計に基づくHexagonLayerを作成したいと思います。

しかし、ケプラー画像でわかるように、サイズスケールが対数である必要があるかどうかはわかりません。

ログサイズスケールをどのように扱うことができますか??

これが私のコードです：

const BLUE_COLORS = [
    [230, 250, 250],
    [193, 229, 230],
    [157, 208, 212],
    [117, 187, 193],
    [75, 167, 175],
    [0, 147, 156],
];

const material = {
    ambient: 0.64,
    diffuse: 0.6,
    shininess: 32,
    specularColor: [51, 51, 51],
};

class DeckGLOverlay extends Component {
    constructor(props) {
        super(props);
        this.state = {
            x: null,
            y: null,
            hoveredObject: null,
            id: uuidv4(),
        };
    }

    getCoordinates = () => {
        let coordinates = [];
        const { data3d } = this.props;
        data3d.forEach(supplypoint => {
            if (
                !supplypoint.geojson ||
                (supplypoint.geojson &&
                    supplypoint.geojson &&
                    !supplypoint.geojson.coordinates)
            ) {
                return;
            }
            let feature = {
                COORDINATES: supplypoint.geojson.coordinates,
                VOLUME: supplypoint.value,
                UNITS: supplypoint.units,
                DATA: {
                    supplypointId: supplypoint.supplypointId,
                    address: supplypoint.address,
                    client: supplypoint.client,
                    diameter: supplypoint.diameter,
                    endusetype: supplypoint.endusetype,
                    usetype: supplypoint.usetype,
                },
            };
            coordinates.push(feature);
        });
        return coordinates;
    };

    sumElevations = values => {
        if (values.length >= 1) {
            let totalVolumes = 0;
            for (let item of values) {
                if (item.hasOwnProperty("VOLUME")) {
                    totalVolumes += item["VOLUME"];
                }
            }
            return totalVolumes;
        }
        return 0;
    };

    render() {
        const { viewport } = this.props;
        const layers = [];
        if (this.props.data3d) {
            layers.push(
                new HexagonLayer({
                    id: `hexagon-layer-${uuidv4()}`,
                    data: this.getCoordinates(),
                    pickable: true,
                    extruded: true,
                    material: material,
                    radius: 5,
                    elevationRange: [0, 1000],
                    elevationScale: 1,
                    elevationAggregation: "SUM",
                    colorRange: BLUE_COLORS,
                    colorScaleType: "quantile",
                    colorAggregation: "SUM",
                    getPosition: d => d.COORDINATES,
                    getElevationValue: d => this.sumElevations(d),
                })
            );
        }
        return (
            <DeckGL layers={layers} onHover={this.onHoverDeckgl} viewState={viewport} />
        );
    }
}

export default injectIntl(DeckGLOverlay);

画像