Как создать HexagonLayer с масштабом журнала - PullRequest
Новая
       41

Как создать HexagonLayer с масштабом журнала

0 голосов
/ 17 марта 2020

Я создал слой в 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);

Изображение

enter image description here

1 Ответ

0 голосов
/ 18 марта 2020

Я использовал scaleLag из d3-scale, из d3-scale .

Решение: 

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