带有 Deck.gl 的导航控件

Question

我正在尝试在 Mapbox 上构建 nft 市场，例如 ovr.ai 来改进我的 React.js。我正在开发一个 fork，但我正在尝试添加新功能，例如导航控制、搜索位置等。

我的导航控件有问题。

import DeckGL from "@deck.gl/react"
import ReactMapGL, { NavigationControl } from "react-map-gl"

return (
    <DeckGL
      style={{ position: "relative" }}
      height={HEIGHT}
      width={WIDTH}
      initialViewState={viewState}
      onViewStateChange={({ viewState }) => setViewState(viewState)}
      controller={true}
      layers={layers}
    >
      <ReactMapGL mapboxApiAccessToken={token}>
        <NavigationControl />
      </ReactMapGL>
    </DeckGL>
  )

代码生成导航控件，但首先；我无法单击它们，因为 dialgl 在它们上面生成画布。即使我从检查中删除画布，缩放控制似乎也不起作用。

https://codesandbox.io/s/cocky-forest-iv6bi2?file=/src/Map/index.js

Answer 1

正如文档建议here，尝试将

react-map-gl

上下文提供程序添加到您的

DeckGL

组件

Answer 2

问题有点老了，但我只想提供我的发现或已删除 _MapContext 的新版本的react-map-gl（v7）的相关答案。

基于MapProvider上的文档here，您需要在Map组件之外添加此包装，以便它告诉Deckgl当前的地图上下文，并在将react-map-gl与deck.gl一起使用时使导航功能正常，例如：

<DeckGL ... >
  <MapProvider>
    <Map ... >

希望这能帮助像我一样在相当长的时间内偶然发现这个问题的人。