地图放在弹窗或折叠面板里显示错位

现象

弹窗打开后地图只有一半，另一半是灰的；拖一下或者缩放一次就恢复正常。 或者在标签页里切回去的时候，地图变成空白，缩放后才重新出现。

成因

地图库在初始化时读取容器尺寸，据此计算画布大小和瓦片覆盖范围。 如果初始化那一刻容器还是 display: none 或者宽高为 0， 库拿到的就是 0×0，之后容器显示了，但库内部的尺寸记录没有更新。

拖动或缩放之所以能「修好」，是因为这些操作会触发一次内部尺寸重算， 属于碰巧修复，不能依赖。

解法一：等容器可见后再初始化

最干净的做法。弹窗打开、动画结束之后再创建地图对象。

function openDialog() {
  dialog.style.display = 'block';

  // 下一帧再初始化，确保布局已经完成
  requestAnimationFrame(function () {
    if (!map) {
      map = L.map('map', { center: [39.9, 116.4], zoom: 12 });
      L.tileLayer(url).addTo(map);
    }
  });
}

只初始化一次，重复打开时复用已有的实例，避免反复创建销毁。

解法二：可见时手动重算

如果必须先初始化（比如要预加载数据），就在容器显示后调一次重算方法。

// Leaflet
map.invalidateSize();

// OpenLayers
map.updateSize();

invalidateSize() 在过渡动画中调用可能拿到中间尺寸， 建议放在 transitionend 之后，或者延迟一帧。

解法三：监听尺寸变化

容器尺寸会被很多因素改变：侧边栏展开、窗口缩放、布局切换。 用 ResizeObserver 统一处理，比在每个地方手动调更可靠。

var ro = new ResizeObserver(function () {
  if (map) map.invalidateSize();
});

ro.observe(document.getElementById('map'));

注意 ResizeObserver 会在尺寸每一次变化时触发，地图重算本身也会改变布局， 有可能形成循环。加一个简单的防抖能避免。

var timer = null;
var ro = new ResizeObserver(function () {
  clearTimeout(timer);
  timer = setTimeout(function () {
    if (map) map.invalidateSize();
  }, 80);
});
ro.observe(document.getElementById('map'));

Cesium 的特殊情况

Cesium 的 Viewer 自身会监听窗口尺寸变化，但对父容器的 CSS 变化不敏感。 在弹窗里使用时，容器显示后调一次 viewer.resize()， 或者调用 viewer.scene.requestRender() 强制刷新一帧。

另外，如果开了 requestRenderMode，弹窗打开时可能一帧都不画， 需要显式请求一次渲染。

排查顺序

1. 确认初始化那一刻容器是不是隐藏的
2. 是隐藏的 → 改成可见后初始化
3. 不能改时序 → 容器显示时调一次重算方法
4. 布局会动态变化 → 加 ResizeObserver 加防抖
5. 标签页切换场景 → 激活时也要重算一次