使用html2canvas使用地图标记导出传单OpenStreetMap图像

Question

我试图出口leaftlet地图markers来PNG使用格式html2canvas 。

问题是html2canvas能够创建Map的PNG，但不能创建Map上的Markers。 不确定原因，但我想是因为分层，它仅创建了地图图层的PNG。

我的小提琴： http : //jsfiddle.net/Lup55pa6/1/

如果有人可以向我提供我正在使用的现有API的解决方案，或者可以在任何JS库或Java中考虑其他导出选项，那就太好了。

Answer 1

我在导出带有标记的传单地图时遇到问题，

最后，我在服务器（节点）中创建了地图

我写了一篇文章，如何将传单地图导出为pdf，请参见下面的链接

将传单地图导出为pdf报告

Answer 2

您的问题是传单正在将标记添加为html2canvas无法呈现的svg（ https://github.com/niklasvh/html2canvas/issues/95 ）

通过将L_PREFER_CANVAS标志设置为true，您应该能够强制传单使用画布而不是svg，如下所示： https : //github.com/CloudMade/Leaflet/blob/master/debug/vector/vector-canvas.html

Answer 3

我正在使用Openlayers 3来做到这一点。 由于您有的安全问题，因此至少不能使用我尝试过的html2canvas（在文档中说您无法渲染iframe）。 这是我的代码，希望能对您有所帮助。

HTML <a id =“ export-png” class =“ download-pdf” download =“ map.png” title =“ Descargar”> </ a>

Java脚本

函数drawMap（）{
var map = new ol.Map（{
图层：[new ol.layer.Tile（{source：new ol.source.OSM（）}）]，
目标：“地图”，
控件：ol.control.defaults（{
attributionOptions：/ ** @type {olx.control.AttributionOptions} * /（{
可折叠：错误
}）
}），
视图：new ol.View（{
中心：ol.proj.transform（[geografic.longitud，geografic.latitude]，'EPSG：4326'，'EPSG：900913'），
变焦：8
}）
}）;

var exportPNGElement = document.getElementById（'export-png'）;
exportPNGElement.addEventListener（'click'，function（e）{
map.once（'postcompose'，function（event）{
var canvas = event.context.canvas;
window.open（canvas.toDataURL（'image / png'））;
}）;
map.renderSync（）;
}，错误）；
}