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

最新推荐文章于 2023-12-13 14:09:35 发布

巨脸怪

最新推荐文章于 2023-12-13 14:09:35 发布

阅读量1.1k

点赞数 1

分类专栏： Leaflet 文章标签： vue 前端 javascript

本文链接：https://blog.csdn.net/qq_43334519/article/details/128575022

版权

Leaflet 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

一、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）：