0

我正在使用带有 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 底图并尝试相同，但遇到了同样的问题。

非常感谢任何帮助！

4

1 回答 1

0

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

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

于 2018-04-21T04:59:37.683 回答