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

最新推荐文章于 2024-05-31 17:29:33 发布

霸道流氓气质

最新推荐文章于 2024-05-31 17:29:33 发布

阅读量4k

点赞数

分类专栏： GIS相关文章标签： leaflet

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/123996714

版权

GIS相关专栏收录该内容

130 篇文章 49 订阅

订阅专栏

场景

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

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


    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="./js/leaflet.browser.print.js"></script>
    <script type="text/javascript" src="./js/dom-to-image.js"></script>

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、完整示例代码


<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet-browser-print实现导出照片</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body >
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="./js/leaflet.browser.print.js"></script>
    <script type="text/javascript" src="./js/dom-to-image.js"></script>
    <script type="text/javascript">

        var map = L.map('map').setView([36.09, 120.35], 13);
        var tiles =
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: ''
            });
        tiles.addTo(map);

        L.marker([36.09, 120.35]).addTo(map)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();


        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);


    </script>
</body>

</html>

4、效果

霸道流氓气质

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
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.
复制链接

扫一扫