Leaflet easyPrint 插件使用教程

最新推荐文章于 2024-08-16 09:37:52 发布

郦祺嫒Amiable

最新推荐文章于 2024-08-16 09:37:52 发布

阅读量619

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00302/article/details/141236813

版权

Leaflet easyPrint 插件使用教程

leaflet-easyPrintA leaflet plugin which adds an icon to print the map - Demo @ http://rowanwins.github.io/leaflet-easyPrint/项目地址:https://gitcode.com/gh_mirrors/le/leaflet-easyPrint

项目介绍

Leaflet easyPrint 是一个 Leaflet 地图库的插件，它允许用户通过添加一个打印图标来打印或导出地图。该插件支持调整地图到预定义的大小（如 A4 横向和纵向）以及自定义大小，并且支持保存为 PNG 格式。

项目快速启动

安装

你可以通过 NPM 安装该插件：

npm install leaflet-easyprint

使用

在你的 HTML 文件中引入 Leaflet 和 easyPrint 插件的 CSS 和 JS 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet easyPrint 示例</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="path/to/leaflet-easyprint.js"></script>
</head>
<body>
    <div id="map" style="height: 600px;"></div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        L.easyPrint({
            title: '打印地图',
            position: 'topleft',
            sizeModes: ['Current', 'A4Portrait', 'A4Landscape']
        }).addTo(map);
    </script>
</body>
</html>