将leaflet地图代码片段转换为图片

Question

我需要将包含leaflet地图的页面导出为PDF。我尝试将地图容器转换为图像，但那并不完美。

我使用的代码在此处

http://jsfiddle.net/Sq7hg/2/

html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
    document.getElementById('canvas').appendChild(canvas);
    var data = canvas.toDataURL('image/png');
    console.log(data)
    // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

    var image = new Image();
    image.src = data;
    document.getElementById('image').appendChild(image);
}

});

这段代码在leaflet地图上运行不完美。我该怎么实现？

- I'm nidhin

Answer 1

我认为你最好使用leaflet-image插件，它正是这样做的。标题中有一个演示链接。主要问题是强制Leaflet使用画布进行渲染。

- Ilja Zverev

---

谢谢llja..我尝试过了。但是只有在没有标记时才有效。每当地图上添加一个标记时，控制台就会显示此错误：“Uncaught TypeError: Cannot read property '0' of undefined”。 - I'm nidhin

太好了，它运行了.. :) 标记大小之前没有定义，这就是错误的原因..现在完美了..谢谢 llja.. - I'm nidhin

这个插件是否有像d3-queue这样的依赖关系？ - Aamir Rizwan

它有依赖关系（请参见 package.json），但是存储库中有预构建的缩小版本（请参见文档）可供使用。 - Ilja Zverev

Answer 2

我曾经遇到一个问题，需要导出带有特殊标记的leaflet地图。我尝试使用插件leaflet-image，但它只适用于标准标记。

最终，我在服务器（Node）上创建了地图。

我写了一篇文章，介绍如何将leaflet地图导出为pdf文件，请查看下面的链接：

导出leaflet地图为pdf报告

- orenw