如何捕获Leaflet地图完全渲染就绪的事件？

地图出现灰色块是因为瓦片还没加载完成，whenReady()只保证地图框架初始化，不负责所有瓦片渲染。结合你用的SimpleMapScreenshoter，不同地图API可以通过监听瓦片/图层加载完成的事件来解决，具体方案如下：

针对不同地图API的实现 #

Leaflet 地图 #

Leaflet 可以通过监听瓦片加载的开始、完成、失败事件，统计所有瓦片状态：

let loadedTiles = 0;
let totalTiles = 0;

// 记录开始加载的瓦片总数
map.on('tileloadstart', () => {
  totalTiles++;
});

// 单个瓦片加载完成
map.on('tileload', () => {
  loadedTiles++;
  checkAllDone();
});

// 瓦片加载失败也算完成，避免无限等待
map.on('tileerror', () => {
  loadedTiles++;
  checkAllDone();
});

function checkAllDone() {
  if (loadedTiles === totalTiles && totalTiles > 0) {
    // 所有瓦片就绪，触发截图
    const screenshoter = new SimpleMapScreenshoter(map);
    screenshoter.takeScreenshot();
    // 重置计数，防止后续地图操作重复触发
    loadedTiles = 0;
    totalTiles = 0;
  }
}

Google Maps 地图 #

用tilesloaded确保瓦片加载，再结合idle事件保证地图视图稳定：

map.addListener('tilesloaded', () => {
  // 只监听一次idle事件，避免重复触发
  map.addListenerOnce('idle', () => {
    const screenshoter = new SimpleMapScreenshoter(map);
    screenshoter.takeScreenshot();
  });
});

OpenLayers 地图 #

监听rendercomplete事件，它会在所有图层渲染完成后触发：

map.on('rendercomplete', () => {
  const screenshoter = new SimpleMapScreenshoter(map);
  screenshoter.takeScreenshot();
  // 移除监听，只执行一次截图
  map.un('rendercomplete', arguments.callee);
});

兜底优化：添加超时机制 #

可以加个10秒左右的超时，防止因瓦片加载失败导致一直等待：

const timeoutId = setTimeout(() => {
  console.warn('瓦片加载超时，强制截图');
  const screenshoter = new SimpleMapScreenshoter(map);
  screenshoter.takeScreenshot();
}, 10000);

// 在上面的checkAllDone或事件触发后清除超时
function checkAllDone() {
  if (loadedTiles === totalTiles && totalTiles > 0) {
    clearTimeout(timeoutId);
    // 执行截图...
  }
}

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