如何使用JavaScript导出包含WebGL热力图层的Leaflet地图为图片

问题原因 #

导出失败通常由两个核心原因导致：

• WebGL热力图的canvas默认开启preserveDrawingBuffer: false，绘制完内容后缓冲会被清空，domtoimage读取时拿不到绘制结果
• 地图瓦片/热力图资源未配置跨域，导致canvas被跨域污染，无法读取内容

解决方案1：修复配置后继续使用domtoimage #

首先调整两处配置即可复用原有代码：

1. 初始化WebGL热力图时添加preserveDrawingBuffer: true参数，保留绘制缓冲
2. Leaflet瓦片图层初始化时添加crossOrigin: 'anonymous'参数，避免瓦片跨域污染canvas

解决方案2：手动合并图层（兼容性最高） #

如果调整配置后仍有异常，可以手动合并底图和热力图内容再导出，示例代码如下：

// 1. 等待所有图层加载完成
await new Promise(resolve => tileLayer.on("load", () => resolve()));

// 2. 获取底图截图
const baseMapDataUrl = await domtoimage.toPng(mapElement, { 
  width: map_data["size"]["x"], 
  height: map_data["size"]["y"] 
});

// 3. 获取热力图canvas元素，替换为页面中实际的热力图canvas选择器
const heatmapCanvas = document.querySelector('.heatmap-layer canvas');

// 4. 创建新canvas合并两个图层
const mergeCanvas = document.createElement('canvas');
mergeCanvas.width = map_data["size"]["x"];
mergeCanvas.height = map_data["size"]["y"];
const ctx = mergeCanvas.getContext('2d');

// 5. 加载底图并绘制
const baseImg = new Image();
baseImg.crossOrigin = 'anonymous';
await new Promise((resolve, reject) => {
  baseImg.onload = resolve;
  baseImg.onerror = reject;
  baseImg.src = baseMapDataUrl;
});
ctx.drawImage(baseImg, 0, 0);

// 6. 绘制热力图图层
ctx.drawImage(heatmapCanvas, 0, 0);

// 7. 导出合并后的图片
const finalDataUrl = mergeCanvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'leaflet_plot_extract.png';
link.href = finalDataUrl;
link.click();

注意事项 #

• 所有地图资源、自定义图标、热力图数据源都需要配置跨域头，否则canvas会被污染导致导出失败
• 导出操作执行前不要缩放、拖动地图，避免热力图和底图位置错位

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