Leaflet.Browser.Print 插件使用教程

最新推荐文章于 2024-09-21 22:25:33 发布

邴富畅Pledge

最新推荐文章于 2024-09-21 22:25:33 发布

阅读量826

点赞数 19

本文链接：https://blog.csdn.net/gitblog_00102/article/details/141249199

版权

Leaflet.Browser.Print 插件使用教程

leaflet.browser.printA leaflet plugin which allows users to print the map directly from the browser项目地址:https://gitcode.com/gh_mirrors/le/leaflet.browser.print

1、项目介绍

Leaflet.Browser.Print 是一个用于 Leaflet 地图库的插件，它允许用户通过浏览器直接打印地图或将其导出为 PDF。该插件提供了多种打印模式和自定义选项，使得地图打印变得简单且灵活。

2、项目快速启动

引入插件

首先，需要在 HTML 文件中引入 Leaflet 和 Leaflet.Browser.Print 插件的脚本和样式文件：

<!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" />
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="path/to/leaflet.browser.print.min.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 100vh;"></div>
</body>
</html>

初始化地图和打印控件

在脚本中初始化地图，并添加打印控件：

<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 customActionToPrint = function(context, mode) {
        return function() {
            window.alert("We are printing the MAP. Let's do Custom print here.");
            context._printMode(mode);
        }
    };

    L.control.browserPrint({
        title: 'Just print me',
        documentTitle: 'Map printed using leaflet browser print plugin',
        printLayer: tiles,
        closePopupsOnPrint: false,
        printModes: [
            L.BrowserPrint.Mode.Landscape("Tabloid", {title: "Tabloid VIEW"}),
            L.browserPrint.mode("Alert", {title: "User specified print action", pageSize: "A6", action: customActionToPrint, invalidateBounds: false}),
            L.BrowserPrint.Mode.Landscape("Portrait"),
            L.BrowserPrint.Mode.Auto("B4", {title: "Auto"}),
            L.BrowserPrint.Mode.Custom("B5", {title: "Select area"})
        ],
        manualMode: false
    }).addTo(map);
</script>