前两天在实现“地图打印”功能时发现网上有很多博主推荐了好几种插件，于是本人就挨个试了一遍，今天就其中比较“热门”的三款在这里简单整理一下，如有疏漏欢迎补充。

一、leaflet.bigimage

地址：leaflet.bigimage - npm

leaflet.bigimage的特点是很轻巧，因此其交互性也就较差，引入后仅需用户点击对应控件浏览器即可输出对应png格式的图片。

//npm i leaflet.bigimage//引入
import { BigImage } from "leaflet.bigimage";
import "leaflet.bigimage/src/Leaflet.BigImage.css";let LFBigImage= L.control.BigImage({position: "bottomright",//控件位置title: "出图",//控制按钮提示文本maxScale: 10,//最大图像比例minScale: 1,//最小图像比例inputTitle:"级别",//比例输入前的标题downloadTitle:"输出",//输出按钮的提示文本
});LFBigImage.addTo(map);

本人在使用过程中发现该插件能够自动隐藏页面除地图外的所有DOM结构，但是好像无法输出多图层（虽然文档上说有一个版本更新后支持多图层导出，不知道是不是我图层数据的原因，本人使用的是Supermap iServer发布的图层），另外该插件输出地图的时间受输出级别影响很大，低级别的几秒钟即可输出，高级别的可能需要很久（点击“Download”后控件内就会有一个圆圈处于加载状态，刚开始十几分钟都在加载我以为是卡死了，但是后来发现的确是在输出，最后输出的图片可能会有几百兆）

二、leaflet-easyprint

地址：leaflet-easyprint - npm

leaflet-easyprint个人认为其功能、交互性，使用便捷程度等都比较适中，功能整体够用同时代码也不会很复杂，可以通过配置一些Options即可实现较为丰富的功能。

//npm i leaflet-easyprint//引入
import { easyPrint } from "leaflet-easyprint";let LFeasyPrint = L.easyPrint({title: "地图打印",position: "bottomright",sizeModes: ["Current", "A4Portrait", "A4Landscape"], //输出大小模式defaultSizeTitles: {Current: "当前显示尺寸",A4Landscape: "A4横向",A4Portrait: "A4纵向",}, //输出模式按钮提示文本exportOnly: false, //是否自动输出png（导出选项）filename: "leaflet地图", //仅导出选项设置为true时的文件名hidden: false, //界面是否隐藏控件（自定义控件时使用）hideControlContainer: true, //出图是否隐藏控件hideClasses: ["hidePrint", "hidePrint2", "hidePrint3"], //需要隐藏页面中的DOM结构的类名customWindowTitle: "地图标题", //将添加打印纸张的打印窗口的标题（当exportOnly设置为false时地图打印页面的标题）spinnerBgColor: "#0DC5C1", //微调器背景色的有效css颜色（当exportOnly设置为false时打开的打印页面的背景颜色）
});
LFeasyPrint.addTo(map);//给需要在地图上隐藏的DOM结构添加类名
onMounted(() => {printDOM1.classList.add("hidePrint"); // 添加一个或多个类名printDOM2.classList.add("hidePrint2"); // 添加一个或多个类名printDOM3.classList.add("hidePrint3"); // 添加一个或多个类名
});

该插件支持多图层导出，同时可以选择性的将页面中一些DOM结构导出到地图中，也可以通过设置exportOnly的值，从而实现直接导出为png或展示打印页面由用户自己选择并打印。

效果图（exportOnly：false）：

三、leaflet.browser.print

地址：leaflet.browser.print - npm

该插件有很强的交互性，支持用户自定义划取范围导出地图，同时还支持用户自定义导出模式，功能十分丰富，但是好像需要指定导出图层的URL（目前还没研究特别明白就不做详细介绍，以防误人子弟）

leaflet.browser.print插件在线演示

关于Leaflet打印地图的三种方法相关推荐

C语言打印星星（三种方法）
#define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> 运行下面之前记得加头文件哦~ 方法一: int main() {printf(&qu ...
AE开发20210506之数据库、创建个人地理数据库、空间数据与工作空间、打开地图的三种办法、查找资料
20210506 数据库 arcmap相关操作理解数据库的概念工作空间常见数据库创建个人地理数据库创建数据集的概念. 空间数据和工作空间 1. MapControl控件接口打开地图的三种方法 ...
php 打印对象到文件,php实现将数组或对象写入到文件的方法小结【三种方法】...
本文实例讲述了php实现将数组或对象写入到文件的方法.分享给大家供大家参考,具体如下: php将数组或对象原样写入或保存到文件有三种方法可以实现第一种方法是使用serialize, 第二种方法是使用 ...
python打印菱形三种方法_用python打印菱形的实操方法和代码
python怎么打印菱形?下面给大家带来三种方法: 第一种 rows = int(input('请输入菱形边长:\n')) row = 1 while row <= rows: col = 1 ...
html页面打印+区域,实现web网页指定区域打印的三种方法
通过本教程可以实现,将印web网页指定区域的内容,本教程将提供三种方法实现. 方法一:打印网页指定区域 HTML 在需要打印的内容 // 页面上的内容大小调整可以css调整或容器包容打印容器内的内容 ...
python初学者：打印9*9乘法表的三种方法
再次拾起python,很基础的入门题就是打印9*9乘法表,分别有个人作答版.前辈修改版.老师答案版.现把三种方法都记下来: 打印9*9乘法表自己作答版:能看出,逻辑很乱,因为思考时是先考虑j=i打印 ...
广度优先搜索（BFS）最短路径输出表示（三种方法）
相信我,看完之后,你会对BFS有种全新的了解,彻底掌握BFS 只需要这一篇就足够啦,狗头 BFS路径表示广度优先搜索顾名思义就是以迷宫里的无向图某一个点,借助队列,一层一层以该点为中心散开进行搜索, ...
获取cookie_抢券第一课：三种方法获取Cookie
现在分享京东抢券是不是不合适?毕竟还没有到双十一或者其他京东大促的时间. 记得以往京东还有那种神券299减200,399减300.基本上都是到点进行抢购,而且还不一定能抢到.不过今天先来分享获取Coo ...
php数组如何写入txt文件中_php将数组写入到文件的三种方法
php的数组十分强大,有些数据不存入数据库直接写到文件上,用的时候直接从文件中读取,本文章向大家介绍php将数组写入到文件的三种方法. 第一:serialize方法使用 serialize 将数组序 ...

关于Leaflet打印地图的三种方法

一、leaflet.bigimage

二、leaflet-easyprint

三、leaflet.browser.print

关于Leaflet打印地图的三种方法相关推荐

最新文章

热门文章