使用地图图像时未捕获属性文本 canvas Mapbox-GL-JS

Question

我正在使用带有 Mapbox-GL-JS 的 ESRI 底图。我正在尝试使用以下代码捕获地图的屏幕截图：

this.map.getCanvas().toBlob(function (blob) {
   canvasContext.strokeStyle = '#CCCCCC';
   canvasContext.strokeRect(leftPosition, topPosition, width, height);
   var img = new Image();
   img.setAttribute("crossOrigin", "anonymous");
   var srcURL = URL.createObjectURL(blob);
   img.onload = function () {
      canvasContext.drawImage(img, leftPosition, topPosition, width, height);
      URL.revokeObjectURL(srcURL);
   };
   img.src = srcURL;
});

我不明白为什么地图上的属性没有在屏幕截图中捕获。我明白我在这里只是想获取地图的canvas。我什至尝试向地图 canvas 添加文本元素，但这也不起作用。我有标记和路线，可以正确进入图像。我也尝试过使用 Mapbox 底图并尝试相同的方法，但遇到了同样的问题。

非常感谢任何帮助！

Answer 1

map.getCanvas() 只会 return 地图的 canvas 而不是位于地图上方的任何 HTML 元素，例如控件、Mapbox 徽标或属性文本。 Sam Murphy 一直在研究一个示例，展示如何将包含徽标和属性文本的地图捕获到图像中，您可以在 https://github.com/mapbox/mapbox-gl-js/pull/6518/files.

上看到该图像

由于我们无法轻松地将 HTML 元素捕获到 JavaScript 中的图像，因此在绘制到图像中的 canvas 中重新创建了属性文本。

使用地图图像时未捕获属性文本 canvas Mapbox-GL-JS

Attribution text not getting captured when using the image of the map canvas Mapbox-GL-JS

snapshot

mapbox-gl-js

attribution