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

Question

每次我在地图上移动时，我都在尝试 console.log 我的 React 应用程序中 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 中不起作用。 ReactMapGL 是否有等同于 onViewStateChange 的道具？这可能允许我创建一个打印出 ref.

的函数

Answer 1

你可以试试：

• 直接从 deck 收听 onViewStateChange（建议使用一些去抖）
• 访问viewState
• 使用 WebMercatorViewport class
中的 getBounds 方法

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)}
/>