调整容器大小时 Mapbox-gl 闪烁 <div>

Question

我正在开发一个功能，我们可以增加/减少 Mapbox-gl 容器 ()，通过拖动 Mapbox 容器的任意角来调整大小。这就像增加/减少一个正方形/矩形框。但在增加/减小尺寸时它会闪烁。我使用的是mapbox gl js最新版本v2.6.1

但是，旧的 Mapbox API（版本 v3.3.1）不会发生闪烁

你能建议如何让 Mapbox gl js 获得流畅的体验吗

谢谢

Answer 1

2024，使用 lodash.debounce

useEffect(() => {
  const debouncedResize = debounce(() => {
    mapRef.current?.resize();
  }, 0);

  const handleResize = () => {
    debouncedResize();
  };

  const resizer = new ResizeObserver(handleResize);

  if (mapContainerRef.current) {
    resizer.observe(mapContainerRef.current);
  }

  return () => {
    resizer.disconnect();
    debouncedResize.cancel();
  };
}, []);