Mapbox GL Js，动态改变地图容器大小，无法调整地图大小

如何解决Mapbox GL Js，动态改变地图容器大小，无法调整地图大小

我的地图实例存在于一个可调整大小的容器中，当我改变大小时，我应该调用 map.resize()。我想知道有没有办法侦听 mapBox 容器调整大小事件，以便它可以触发 map.resize() ？你能建议怎么做吗？

export default function Map({ chartID,configuration,data }) {
  const classes = useStyles();
  const mapContainer = useRef(null);

  const [map,setMap] = useState(null);

  const [settings,setSettings] = useState({
    longitude: -73.935242,latitude: 40.73061,zoom: 9,});

  useEffect(() => {
    const geoFeatures = //...getting data

    const map = new mapBoxgl.Map({
      container: mapContainer.current,style: 'mapBox://',center: [settings.longitude,settings.latitude],zoom: settings.zoom,});

    map.on('move',() => {...});

    //setting map to state if we need to reference it later
    setMap(map);
    // Clean up on unmount
    return () => map.remove();
  },[]);

  return (
    <div className={classes.mapWrapper}>
      <div ref={mapContainer} className={classes.map} />
    </div>
  );
}

解决方法

我最终添加了 ResizeObserver 和 debounce map.resize()

   useEffect(()=>{
    //map init....
    const resizer = new ResizeObserver(_.debounce(() => map.resize(),100));
    resizer.observe(mapWrapper.current); 

      return () => {
      resizer.disconnect();
      map.remove();
    };
},[])