Leaflet-draw 是一个基于 Leaflet 的绘图插件，它提供了一些基本的绘图交互功能，比如画点、画线、画多边形等，并且还可以以 GeoJSON 格式导出绘制的图形。本文将介绍如何通过 npm 快速安装和使用 leaflet-draw。
安装 leaflet-draw
安装 leaflet-draw 很简单，只需要在命令行中输入以下命令即可：
--- ------- ------------
使用 leaflet-draw
使用 leaflet-draw 分为两个步骤：首先是添加绘图功能，然后是监听绘图完成的事件。下面是一个简单的示例：
-- -- ------- - ------------
------ - ---- ----------
------ ---------------
-- --------
----- --- - -------------
-- ---- ---- -----
-----------------------------------------------------------------------------
-- ------
----- ---------- - ----------------------------
----- ----------- - --- ----------------
----- -
------- -----
--------- -----
-------- -----
------- -----
---------- -----
--
----- -
------------- -----------
--
--------------
-- --------
---------------------------- --- -- -
----- ----- - --------
---------------------------
----- ------- - -----------------------
---------------------
---在上面的代码中，我们首先创建了一个地图并且添加了一个 tile layer。然后创建了一个 feature group 用来存储绘制的图形。第三步是创建绘图控件，并且将它添加到地图中。最后是监听绘图完成事件并且输出 GeoJSON 格式的数据到控制台。
深入了解 leaflet-draw
绘图控件
绘图控件是 leaflet-draw 的核心组件，我们可以通过控件选项来配置绘图功能。控件选项有两个主要配置：draw 和 edit。draw 选项用来配置绘图功能，比如我们可以开启或关闭画点、画线、画多边形等功能。edit 选项用来配置编辑功能，比如我们可以设置编辑完成后的 feature group。
以下是绘图控件选项的完整配置：
----- ----------- - --- ----------------
----- -
------- ----- -- --
--------- ----- -- --
-------- ----- -- ----
------- ----- -- --
---------- ----- -- ---
--
----- -
------------- ----------- -- ------- -----
------- ----- -- ------
--
--------- ----------- -- ----
---------- ----- -- ----
------- ------ ----- -- ----
---绘制事件
在上面的示例中，我们监听了绘图完成事件 L.Draw.Event.CREATED。实际上还有其他的绘制事件可以监听，例如 L.Draw.Event.EDITED、L.Draw.Event.DELETED 等。以下是绘制事件的完整列表：
L.Draw.Event.CREATED：绘制完成事件。L.Draw.Event.EDITSTART：开始编辑事件。L.Draw.Event.EDITMOVE：编辑图形移动事件。L.Draw.Event.EDITRESIZE：编辑图形大小调整事件。L.Draw.Event.EDITVERTEX：编辑图形某个顶点事件。L.Draw.Event.EDITSTOP：编辑完成事件。L.Draw.Event.DELETED：删除图形事件。
导出 GeoJSON 数据
我们可以使用 feature group 的 toGeoJSON 方法来导出 GeoJSON 格式的数据。比如在绘图完成事件中使用以下代码将绘制的图形输出到控制台：
----- ------- - ----------------------- ---------------------
总结
通过本文的介绍，你已经学会了如何通过 npm 安装和使用 leaflet-draw，以及如何添加绘图功能和监听绘图完成的事件。如果你想深入了解该插件的更多功能，请参考官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/77420