reactjs - DeckGL and Maplibre GL JS Overlay Problem for H3Hexagon Layer - Stack Overflow

Versions tried"deck.gl": "^9.0.27","maplibre-gl": "^4.0.0"an

Versions tried "deck.gl": "^9.0.27", "maplibre-gl": "^4.0.0"

and

"deck.gl": "^9.1.4", "maplibre-gl": "^5.1.1"

I'm using Deck.gl and MapLibre to visualize H3 hexagons on a map, but I'm experiencing issues with the layers not overlapping correctly at zoom level 16 and up. Here is my current implementation:

"use client";

import React from 'react';
import { PickingInfo, H3HexagonLayer, DeckGL } from 'deck.gl';
import { Map } from "react-map-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import maplibregl from "maplibre-gl";

type DataType = {
    hex: string;
    count: number;
};

const HvlMap = () => {
    const layer = new H3HexagonLayer<DataType>({
        id: 'H3HexagonLayer',
        data: '.gl-data/master/website/sf.h3cells.json',
        extruded: false,
        getHexagon: (d: DataType) => d.hex,
        getFillColor: (d: DataType) => [255, (1 - d.count / 500) * 255, 0],
        //getElevation: (d: DataType) => d.count,
        //elevationScale: 20,
        pickable: true,
        opacity: 0.5
    });

    const INITIAL_VIEW_STATE = {
        longitude: 32.61300538819346,
        latitude: 39.885875158950185,
        zoom: 12,
        minZoom: 2,
        maxZoom: 15,
        pitch: 40.5,
        bearing: -5
    };

    return <div onContextMenu={evt => evt.preventDefault()}>
        <DeckGL
            initialViewState={{
                longitude: 32.61300538819346,
                latitude: 39.885875158950185,
                zoom: 15,
                maxZoom: 16
            }}
            controller
            getTooltip={({ object }: PickingInfo<DataType>) => object && `${object.hex} count: ${object.count}`}
            layers={[layer]}
        >
            <Map
                mapLib={maplibregl}
                className=""
                initialViewState={INITIAL_VIEW_STATE}
                style={{ width: "100%", height: "100%" }}
                mapStyle=".json?key=YOURKEY"
            >
            </Map>
        </DeckGL>
    </div>;
}

export default HvlMap;```

At zoom level 16, the layers from Deck.gl and MapLibre do not overlap correctly.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745087820a4610511.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信