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>

Когда я перетаскиваю кнопку, которая накладывается на карту, она также перемещает карту за этой кнопкой. Есть ли способ предотвратить это движение? То есть запретить перемещение карты при перетаскивании элемента?


reactjs mapbox react-map-gl mapbox-gl-js deck.gl
person mmz    schedule 20.02.2021    source источник
comment
Не могли бы вы создать кодовое поле / песочницу, пожалуйста?   -  person AdriSolid    schedule 20.02.2021
comment
@AdriSolid спасибо за комментарий. Смог решить это   -  person mmz    schedule 20.02.2021

Ответы (1)


arrow_upward
0
arrow_downward

Ладно, я понял. Проблема заключалась в размещении / заказе компонентов. Он должен быть размещен вне компонента 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>
    </>
person mmz    schedule 20.02.2021