DeckGL：拖动元素时防止地图移动答案

【问题标题】：DeckGL: Prevent map movement when dragging elementsDeckGL：拖动元素时防止地图移动
【发布时间】：2021-02-20 00:39:37
【问题描述】：

我有一张 DeckGL 地图，我在上面放置了一个按钮：

<DeckGL
      ContextProvider={MapContext.Provider}
      controller={true}
      effects={effects}
      getTooltip={getTooltip}
      initialViewState={INITIAL_VIEW_STATE_AREA}
      layers={layers}
      onWebGLInitialized={onInitialized}
    >
      <Button
        text="Search"
        style={{ position: "absolute", top: 10, left: 10 }}
      ></Button>
      <StaticMap
        reuseMaps
        mapStyle={MAP_STYLE}
        preventStyleDiffing={true}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      />
    </DeckGL>

当我拖动覆盖在地图上的按钮时，它也会将地图移动到该按钮后面。有什么办法可以阻止这种运动吗？也就是在拖拽元素时防止地图被移动？

【问题讨论】：

你能创建一个代码笔/沙箱吗？
@AdriSolid 感谢您的评论。能够解决它

标签： reactjs mapbox mapbox-gl-js deck.gl react-map-gl

【解决方案1】：

好的，我明白了。问题是组件放置/订购。应该放置在DeckGL 组件外部。这样，地图将全屏呈现，按钮真正呈现在地图顶部。以下是可能遇到此问题的任何人的更新代码：

    <>
      <Button
        text="Search"
        style={{ position: "absolute", top: 10, left: 10 }}
      ></Button>
      <DeckGL
        ContextProvider={MapContext.Provider}
        controller={true}
        effects={effects}
        getTooltip={getTooltip}
        initialViewState={INITIAL_VIEW_STATE_AREA}
        layers={layers}
        onWebGLInitialized={onInitialized}
      >
        <StaticMap
          reuseMaps
          mapStyle={MAP_STYLE}
          preventStyleDiffing={true}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        />
      </DeckGL>
    </>

【讨论】：