介绍
leaflet.freedraw 是一个基于 Leaflet 的免费手绘绘图工具包，可以让用户在地图上自由绘制多边形、线条或点等。它是一个强大的工具，可用于创建各种类型的地理信息系统 (GIS) 应用程序。
安装
首先要安装 Leaflet，如果已经安装了 Leaflet，则只需从 npm 安装 leaflet.freedraw：
npm install leaflet npm install leaflet.freedraw
使用方法
基础使用
使用 leaflet.freedraw 很简单，只需将其添加到 Leaflet 地图中即可：
-- -------------------- ---- ------- -- -------- ----- --- - ----------------------------- ------- ---- -- ------ ----------------------------------------------------------------- - ------------ -- ------------- ------------- -------------- -- -- -------- -------- ----- -------- - --- ------------- --------------------
现在，你可以在地图上绘制任何你想要的东西了。
绘制模式
leaflet.freedraw 提供了三种默认的绘制模式：点模式、线模式和多边形模式。你可以在创建 Freedraw 对象时指定一个默认模式：
const freedraw = new L.FreeDraw({
mode: L.FreeDraw.MODES.POLYGON // 多边形模式为默认
});你也可以通过 Freedraw 对象的 setMode() 方法来动态更改绘制模式：
freedraw.setMode(L.FreeDraw.MODES.POLYLINE); // 切换到线模式
样式和选项
leaflet.freedraw 提供了许多配置选项，可以使你的绘图更加灵活和可定制。以下是一些常见的样式和选项:
mode- 绘制模式，默认值为L.FreeDraw.MODES.POLYGONkeepExistingPolygon- 是否保留已经存在的多边形，默认值为falsefreeMode- 是否启用自由模式，即不需要点击就能够开始绘制，默认值为falsefuzzFactor- 模糊因子，用于在多边形闭合时连接两个端点，默认值为10maxVertices- 最大顶点数，默认值为0，表示没有限制showLength- 是否显示线条长度，默认值为falsestrokeWidth- 线条宽度，默认值为2strokeColor- 线条颜色，默认值为'red'fillColor- 填充颜色，默认值为'blue'opacity- 不透明度，默认值为0.5
事件
leaflet.freedraw 支持许多事件，可以监听和响应用户的操作。以下是一些常见的事件：
start- 绘制开始时触发created- 绘制完成后触发，参数为绘制的 GeoJSON 对象editStart- 编辑开始时触发edited- 编辑完成后触发，参数为修改后的 GeoJSON 对象deleteStart- 删除开始时触发deleted- 删除完成后触发，参数为删除的 GeoJSON 对象cancel- 取消绘制或编辑时触发
你可以使用以下方法来添加和删除事件监听器：
freedraw.on('created', function (event) {
console.log('绘制完成:', event.layer.toGeoJSON());
});
freedraw.off('created');示例代码
下面是一个
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37263