如何创建具有对数大小比例的 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);

图片

Answer 1

我使用了 d3-scale 中的 scaleLag，from d3-scale library。

解决方案：

class DeckGLOverlay extends Component {
    constructor(props) {
        super(props);
        this.state = {
            x: null,
            y: null,
            hoveredObject: null,
            id: uuidv4(),
        };
        this.rangeColor = null;
        this.logScale = scaleLog()
            .domain([10, 100000])
            .range([0, 500]);
    }

    getCoordinates = () => {
       ...
       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;
    };

    elevationByLogScale = values => {
        let totalVolumes = this.sumElevations(values);
        let scale = parseInt(this.logScale(totalVolumes));
        if (isNaN(scale)) return 0;
        return scale;
    };

    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,
                    radius: 5,
                    elevationRange: [0, 500],
                    elevationScale: 1,
                    colorRange: BLUE_COLORS,
                    getPosition: d => d.COORDINATES,
                    getElevationValue: d => this.elevationByLogScale(d),
                })
            );
        }
        return (
            <DeckGL layers={layers} viewState={viewport} />
        );
    }
}