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

问题描述

我有一张 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>

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

解决方法

好的，我知道了。问题是组件放置/订购。应该放在外部 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>
    </>