前言
对于地图应用程序的开发者，导出地图的打印工具是必不可少的，以协助其用户分享地图信息。而在该领域，LeafletJS 提供了一个方便的工具 - leaflet-easyprint - 这是一个易于使用的打印插件库，允许我们将 leaflet 地图以很多的格式打印成文件下载。
在本篇文章中，我们将详细介绍如何使用 npm 包 leaflet-easyprint，以及展示如何配置和使用该库来导出我们的地图。
安装及基本设置
要使用 leaflet-easyprint，我们首先需要安装它。在终端或命令行界面下，切换到你的项目文件夹，并执行以下代码：
npm install --save leaflet-easyprint
进一步，在您配置第一个打印按钮之前，您需要先引入 leaflet-easyprint 和它的依赖包。在您的代码文件头部，添加以下代码：
import L from 'leaflet'; import 'leaflet-easyprint';
如果在您的项目中使用的是自定义的 Leaflet build，那么请在自定义构建中包含 leaflet.css 和 leaflet.easyprint.css 这两个文件。
<link rel="stylesheet" href="[leafletpath]/dist/leaflet.css"> <link rel="stylesheet" href="[leafletpath]/dist/leaflet.easyprint.css">
配置与使用
现在我们已经安装了 leaflet-easyprint 并且准备好开始设置。让我们来看看如何配置地图叠加层和打印选项。 使用以下代码，在地图上添加一个打印按钮：
// Create easyPrint control
const printer = L.easyPrint({
title: '打印地图',
position: 'topleft',
sizeModes: ['Current', 'A4Portrait', 'A4Landscape'],
hideClasses: ['leaflet-control-zoom'],
exportOnly: true // 可选的， 无该属性则打印按钮被添加
}).addTo(map)在此示例中，我们创建了一个 easyPrint 控件。 title 属性将控制面板标题设置为 "打印地图"。我们将该值设置为您想要的任何其他内容。 position 属性将控制面板的相对定位，这里是在左上角： sizeModes 属性控制了可用的页面大小。可以挑选适合于您的使用场景的页面大小。
如果您想设置自己的打印选项面板，则需要将 exportOnly 属性设置为 true。
现在，当用户单击 "打印地图" 按钮时，将打开一个打印选项面板。此面板允许用户更改文件类型和纸张大小（或者输出之间图像的比例或 DPI，并保存打印结果。
最后，我们需要在选项面板中添加一些选项，以便用户打印出所需的内容。我们可以通过 addElement 方法来添加选项：
-- -------------------- ---- -------
-- --- ----- -------
------------------------------------------ -------- ------ -
----------------------------------------- -------- -------- -- -
--------------------
------
-- -----
----------------------------------------- -------- -------- -- -
--------------------
------
-- -----
------------------------------------------ -------- -------- -- -
---------------------
------
-- -----
-- -----在这个例子中， 我们创建了一个新的名称为 aditionalOptionBlock 的模块，并且在模块中添加了三个元素。 addElement 中的第一参数值需要是唯一的模块名称。接下来，您可以添加任意数量的元素到模块中， 每个模块都有一个 next 参数。这个_next_ 参数用于指示一个元素与下一个元素之间的关系。如果您的选项不需要_next_ 参数，则将此参数省略即可。
在此示例中，我们添加了三个元素，分别对应三种不同的输出类型：PDF、PNG 和 JPEG。当单击任意一个输出按钮时，将使用相应类型打印地图。
示例代码
-- -------------------- ---- -------
------ - ---- ----------
------ --------------------
--- --- - ------------
--- ------- - -------------
------ ------- -----
--------- ----------
---------- ----------- ------------- ---------------
----------- -----
------------ ------------------------
-------------
------------------------------------------ -------- ------ -
----------------------------------------- -------- -------- -- -
--------------------
------
-- -----
----------------------------------------- -------- -------- -- -
--------------------
------
-- -----
------------------------------------------ -------- -------- -- -
---------------------
------
-- -----
-- -----结论
在 LeafletJS 中使用 leaflet-easyprint 给我们增加了一个简单而实用的功能 - 打印地图导出。使用本文中提到的配置选项，开发人员可以使用自己的要求轻松地定制其地图的文档输出方式，使经验更加透明、易于使用。
快试试看吧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0be4