使用html2canvas的Leaflet OpenStreetMap图像导出与地图标记

Question

我正在尝试使用leaftlet将markers地图与PNG格式导出为html2canvas格式。

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

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

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

Answer 1

我在使用标记

导出传单地图时遇到了问题

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

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

Export leaflet map to pdf report

Answer 2

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

你可以通过将L_PREFER_CANVAS标志设置为true来强制传单使用canvas而不是svg，如下所示：https://github.com/CloudMade/Leaflet/blob/master/debug/vector/vector-canvas.html

Answer 3

我正在使用Openlayers 3来执行此操作。因为你有安全问题，至少我试过不能使用html2canvas（在文档中说你不能渲染iframe）。这是我的代码，希望能有所帮助。

HTML   ＆LT; a id =“export-png”class =“download-pdf”download =“map.png”title =“Descargar”＆gt;＆lt; / A＆GT;

的Javascript

function drawMap（）{
  var map = new ol.Map（{
    layers：[new ol.layer.Tile（{source：new ol.source.OSM（）}）]，
    目标：'地图'，
    控件：ol.control.defaults（{
      attributionOptions：/ ** @type {olx.control.AttributionOptions} * /（{
        可折叠的：假的         }）
    }），
    view：new ol.View（{
     center：ol.proj.transform（[geografic.longitud，geografic.latitude]，'EPSG：4326'，'EPSG：900913'），
    zoom：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（ '图像/ PNG'））;
   }）;
    map.renderSync（）;
    }，false）;
}