Leaflet折叠左侧面板时地图显示空白区域的解决方法咨询

问题根源是Leaflet地图初始化时会根据容器尺寸计算瓦片加载范围，当你通过添加类动态修改容器宽度后，地图不会自动重新计算尺寸和加载新区域的瓦片，所以右侧出现空白。

解决步骤：

• 调用Leaflet的尺寸重置方法：在面板折叠/展开的操作完成后，调用地图实例的invalidateSize()方法，让地图重新计算容器尺寸并加载缺失的瓦片。因为你设置了0.6秒的过渡动画，需要等动画结束后再执行这个方法，示例代码：

// 假设触发面板折叠的元素是.toggle-panel按钮
document.querySelector('.toggle-panel').addEventListener('click', function() {
  const mapWrapper = document.querySelector('.map-wrapper');
  mapWrapper.classList.toggle('shrink-map');
  
  // 等待过渡动画结束后重置地图尺寸
  setTimeout(() => {
    map.invalidateSize(); // 这里的map是你的Leaflet地图实例对象
  }, 600); // 时间和transition的0.6s保持一致
});

• 优化样式优先级：尽量避免使用!important，可以通过提升选择器优先级来覆盖默认样式，同时明确过渡属性：

.map-wrapper {
  width: calc(100vw - 33vw);
  height: 100vh;
}

/* 用组合选择器提高优先级，替代!important */
.map-wrapper.shrink-map {
  width: calc(100vw - 5vw);
  transition: width .6s linear;
}

如果是用Vue、React等框架开发，可以在面板状态变化的钩子函数中调用invalidateSize，比如Vue的watch监听面板折叠状态，React的useEffect依赖面板状态变量，逻辑和原生JS一致。

内容的提问来源于stack exchange，提问作者atul245