Leaflet-draw 是一个基于 Leaflet 的绘图插件，它提供了一些基本的绘图交互功能，比如画点、画线、画多边形等，并且还可以以 GeoJSON 格式导出绘制的图形。本文将介绍如何通过 npm 快速安装和使用 leaflet-draw。
安装 leaflet-draw
安装 leaflet-draw 很简单，只需要在命令行中输入以下命令即可：
npm install 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 格式的数据。比如在绘图完成事件中使用以下代码将绘制的图形输出到控制台：
const geoJson = drawnItems.toGeoJSON(); console.log(geoJson);
总结
通过本文的介绍，你已经学会了如何通过 npm 安装和使用 leaflet-draw，以及如何添加绘图功能和监听绘图完成的事件。如果你想深入了解该插件的更多功能，请参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77420
