使用地图画布 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;
});

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

任何帮助都非常感谢！

Answer 1

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

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