使用Mapbox-GL-JS加载ESRI底图时截图无法捕获属性文本

我之前碰到过好几个类似的案例，核心问题其实很好理解：你用map.getCanvas()只能捕获Mapbox渲染在Canvas画布上的图形内容，但ESRI底图的属性文本大概率是通过悬浮在Canvas上层的DOM元素渲染的——这些DOM文本不在Canvas内部，自然没法被getCanvas()抓到。

下面给你两个实用的解决方案，按推荐程度排序：

方案一：用html2canvas捕获整个地图容器（最推荐） #

html2canvas是专门用来将HTML元素（包括混合了Canvas和DOM的内容）转为Canvas的工具，能完美覆盖你的场景。步骤如下：

1. 先引入html2canvas（可以通过npm安装或者CDN引入，这里用CDN为例）
2. 修改你的截图逻辑，直接捕获地图容器而非单独的Canvas：

// 假设你的Mapbox地图容器id是'map'
const mapContainer = document.getElementById('map');

// 使用html2canvas渲染整个容器
html2canvas(mapContainer, {
  useCORS: true, // 解决ESRI底图瓦片的跨域问题
  allowTaint: false,
  logging: false // 关闭日志输出，避免控制台冗余信息
}).then(capturedCanvas => {
  // 接下来可以按照你的原有逻辑处理这个捕获后的Canvas
  capturedCanvas.toBlob(function(blob) {
    const canvasContext = document.createElement('canvas').getContext('2d');
    const leftPosition = 0; // 替换成你的实际参数
    const topPosition = 0;
    const width = capturedCanvas.width;
    const height = capturedCanvas.height;

    // 绘制边框
    canvasContext.strokeStyle = '#CCCCCC';
    canvasContext.strokeRect(leftPosition, topPosition, width, height);

    const img = new Image();
    img.setAttribute("crossOrigin", "anonymous");
    const srcURL = URL.createObjectURL(blob);
    
    img.onload = function () {
      canvasContext.drawImage(img, leftPosition, topPosition, width, height);
      URL.revokeObjectURL(srcURL);
      // 这里可以添加后续的截图导出逻辑，比如下载图片
    };
    img.src = srcURL;
  });
});

这个方案的优势在于：它会遍历地图容器内的所有元素，不管是Mapbox的Canvas图形，还是ESRI底图的DOM文本标注，都会被统一渲染到新的Canvas里，完全解决文本丢失的问题。

方案二：开启Mapbox的preserveDrawingBuffer（仅适用于文本在Canvas内的场景） #

如果你的ESRI底图文本其实是绘制在Canvas内部的（比如是矢量瓦片的标注），那可以尝试开启Mapbox的preserveDrawingBuffer配置：

const map = new mapboxgl.Map({
  container: 'map',
  style: 'your-map-style',
  preserveDrawingBuffer: true // 开启后，getCanvas()能捕获完整的WebGL帧
});

不过这个方案只对Canvas内绘制的文本有效，如果ESRI底图的文本是DOM元素，这个方法就没用了，所以优先级低于方案一。

额外注意事项 #

• 确保ESRI底图的瓦片服务器允许跨域访问：公共的ESRI底图一般都支持CORS，但如果是私有瓦片，需要在服务器端配置CORS头。
• 如果使用npm安装html2canvas，记得安装最新稳定版，避免旧版本的兼容性问题。

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