配置preserveDrawingBuffer: true截图不生效

[lldcy]

问题描述

想要在地图渲染完成后生成缩略图，但是截图不生效

重现链接

No response

重现步骤

1.创建scene并设置preserveDrawingBuffer: true，地图使用mapbox，给mapbox设置preserveDrawingBuffer: true
2.创建一个蜂巢图，直接使用官网的蜂巢图例子
2.使用html2canvas传入dom进行截图，mapbox地图可以截到，但是上边的蜂巢图出不来

预期行为

期望看到正常截图，但实际上只截到了mapbox底图，使用l7的蜂巢图没有被截取到

平台

• 操作系统: Windows
• 网页浏览器: Google Chrome

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[github-actions]

hi @lldcy, welcome!

[github-actions]

Hi @lldcy, Please star this repo if you find it useful! Thanks ⭐!
你好～ @lldcy 🌟 如果这个仓库对你有帮助，可以给我们点个star支持一下～你的支持对我们来说是最大的鼓励，感谢你的支持与点赞 🌟

[heiyexing]

试试用这个控件看看能不能生效 https://l7.antv.antgroup.com/examples/component/control/#exportimage 如果可以生效的话 可以看下这个组件的源码
https://github.com/antvis/L7/blob/fd086021e5dad29c453fc49a698da88bc5f6fc98/packages/component/src/control/exportImage.ts

[lzxue]

关于preserveDrawingBuffer截图问题的分析和解决方案：

问题原因

html2canvas只能捕获DOM元素，而L7图层是通过WebGL在Canvas上渲染的，不在DOM树中。

解决方案

方案1: 使用Canvas原生方法（推荐）

// 确保scene已完全渲染
scene.on("loaded", () => {
  // 延迟一段时间确保所有图层渲染完成
  setTimeout(() => {
    const canvas = document.querySelector("#map canvas");
    if (canvas) {
      const dataURL = canvas.toDataURL("image/png");
      // 下载或显示缩略图
    }
  }, 1000);
});

方案2: 使用html2canvas配合配置

html2canvas(document.querySelector("#map"), {
  useCORS: true,
  allowTaint: true,
  backgroundColor: null,
  // 关键：捕获所有canvas
  canvas: document.querySelector("#map canvas")
}).then(canvas => {
  // 处理结果
});

方案3: 使用L7内置截图功能

// 如果Scene支持
const image = scene.getMapService().exportMap();

注意事项：

1. preserveDrawingBuffer必须在初始化时设置
2. 截图前确保所有图层加载完成
3. 考虑使用scene.on("render")监听渲染完成事件

[lzxue]

问题分析

经过代码分析，发现这是因为 L7 和 Mapbox 使用两个不同的 canvas 进行渲染：

1. L7 使用独立的 canvas 容器：L7 创建了一个 l7-canvas-container，包含自己的 WebGL canvas，渲染在 Mapbox 地图之上
2. html2canvas 截取单一 DOM 元素：默认只能截取一个 canvas，无法同时获取两个 canvas 的内容

解决方案

方案1：使用 L7 官方的 ExportImage 组件（推荐）

import { Scene, ExportImage } from '@antv/l7';

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    preserveDrawingBuffer: true,
  }),
  preserveDrawingBuffer: true, // L7 侧也需要开启
});

scene.on('loaded', () => {
  const exportImage = new ExportImage({
    onExport: (base64) => {
      // 下载图片
      const link = document.createElement('a');
      link.href = base64;
      link.download = 'map.png';
      link.click();
    },
  });
  scene.addControl(exportImage);
});

方案2：手动合成两个 canvas

如果必须使用 html2canvas，需要手动获取并合并两个 canvas：

import html2canvas from 'html2canvas';

// 1. 截取 Mapbox 地图
const mapContainer = document.querySelector('.mapboxgl-canvas');
const mapCanvas = await html2canvas(mapContainer);

// 2. 截取 L7 图层
const l7Canvas = document.querySelector('.l7-canvas-container canvas');
const l7Img = await html2canvas(l7Canvas);

// 3. 合并两个图片
const finalCanvas = document.createElement('canvas');
finalCanvas.width = mapCanvas.width;
finalCanvas.height = mapCanvas.height;
const ctx = finalCanvas.getContext('2d');
ctx.drawImage(mapCanvas, 0, 0);
ctx.drawImage(l7Img, 0, 0);

---

注意：确保在初始化时同时开启 Mapbox 和 L7 的 preserveDrawingBuffer: true 配置。