DeckGL 和 Mapbox：如何在地图移动时访问 ref 元素？

如何解决DeckGL 和 Mapbox：如何在地图移动时访问 ref 元素？

每次在地图上移动时，我都试图在我的 React 应用程序中 console.log MapBox 地图的边界。

这是我目前的尝试：

return (
    <>
      <DeckGL
        layers={layers}
        initialViewState={INITIAL_VIEW_STATE}
        controller={true}
        onViewStateChange={stateChangeFunc}
      >
        <ReactMapGL
          reuseMaps
          mapStyle={mapStyle}
          preventStyleDiffing={true}
          ref={(ref) => console.log(ref.getMap().getBounds())}
          mapBoxApiAccesstoken={token}
        />
      </DeckGL>
    </>
  );

加载地图时会打印边界，但在地图上移动时打印时遇到问题。是否应该使用 prop 来访问此功能？将 ref={(ref) => console.log(ref.getMap().getBounds())} 放入 DeckGL 不起作用。是否有与 onViewStateChange 的 ReactMapGL 等效的道具？这可能允许我创建一个打印出 ref 的函数。

解决方法

你可以试试：

• 直接从甲板上收听 onViewStateChange（建议使用一些去抖动）
• 访问viewState
• 使用 getBounds 类中的 WebMercatorViewport 方法

import DeckGL,{WebMercatorViewport} from 'deck.gl';

function debounce(fn,ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this,args);
    },ms);
  };
}

function handleViewStateChange({ viewState }) {
  const bounds = new WebMercatorViewport(viewState).getBounds();
  console.log(bounds);
};

<DeckGL
  ...
  onViewStateChange={debounce(handleViewStateChange,500)}
/>