如何下载带有图层的地图的单张图像

Question

我正在尝试使用leaflet-image插件获取快照。我得到了这个错误：

leaflet-image.js:195 Element could not be drawn on canvas <svg class=​"leaflet-zoom-animated" width=​"1220" height=​"790" viewBox=​"-24 -16 1220 790" style=​"transform:​ translate3d(-24px, -16px, 0px)​;​">​…​</svg>​handlePathRoot @ leaflet-image.js:195start @ leaflet-image.js:336poke @ leaflet-image.js:324(anonymous function) @ leaflet-image.js:352tileQueueFinish @ leaflet-image.js:172maybeNotify @ leaflet-image.js:377(anonymous function) @ leaflet-image.js:353im.onload @ leaflet-image.js:148

当我将图层加载到地图(as the attached image)时就会发生这种情况

任何帮助都是非常感谢的。

Answer 1

很可能图像没有CORS标头，并且leaflet-image.js使用的<canvas> HTML元素正在被污染。

这个问题在以下问题中有很好的记录：«Cross-origin data in HTML5 canvas»和«Canvas image crossplatform insecure error»。最终，您必须确保在从中获取图像的web服务器中启用了CORS。