最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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.
发布评论

评论列表(0)

  1. 暂无评论