Leaflet中使用leaflet.browser.print插件实现导出图片

场景

Leaflet中使用leaflet.easyPring插件实现打印效果：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122452831

在上面实现打印的效果时使用的是easyPrint插件实现的效果。

除此之外还可以使用browser.print插件实现。

插件地址：

https://github.com/Igor-Vladyka/leaflet.browser.print

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、示例代码地址

https://igor-vladyka.github.io/leaflet.browser.print/examples/savePNG.html

访问并查看网页源码，下载并引入所需依赖

​
    
    
    

​

 

2、加载导出图片控件

        var saveAsImage = function () {
    return domtoimage.toPng(document.body)
      .then(function (dataUrl) {
       var link = document.createElement('a');
       link.download = map.printControl.options.documentTitle || "exportedMap" + '.png';
       link.href = dataUrl;
       link.click();
      });
   }
        //加载导出图片控件
        L.control.browserPrint({
            documentTitle: "printImage",
            printModes: [
                L.BrowserPrint.Mode.Landscape(),
            ],
            printFunction: saveAsImage
        }).addTo(map);

3、完整示例代码

​




    
    
    
    



    

    
    
    
    




​

4、效果