npm 包 leaflet-draw 使用教程-JavaScript中文网-JavaScript教程资源分享门户

Leaflet-draw 是一个基于 Leaflet 的绘图插件，它提供了一些基本的绘图交互功能，比如画点、画线、画多边形等，并且还可以以 GeoJSON 格式导出绘制的图形。本文将介绍如何通过 npm 快速安装和使用 leaflet-draw。

安装 leaflet-draw

安装 leaflet-draw 很简单，只需要在命令行中输入以下命令即可：

npm install leaflet-draw

使用 leaflet-draw

使用 leaflet-draw 分为两个步骤：首先是添加绘图功能，然后是监听绘图完成的事件。下面是一个简单的示例：

// www.javascriptcn.com code example
// 引入 leaflet 和 leaflet-draw
import L from 'leaflet';
import 'leaflet-draw';

// 创建一个地图对象
const map = L.map('map');

// 创建一个 tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 添加绘图功能
const drawnItems = L.featureGroup().addTo(map);
const drawControl = new L.Control.Draw({
  draw: {
    marker: true,
    polyline: true,
    polygon: true,
    circle: true,
    rectangle: true,
  },
  edit: {
    featureGroup: drawnItems,
  },
}).addTo(map);

// 监听绘图完成事件
map.on(L.Draw.Event.CREATED, (e) => {
  const layer = e.layer;

  drawnItems.addLayer(layer);

  const geoJson = drawnItems.toGeoJSON();
  console.log(geoJson);
});

在上面的代码中，我们首先创建了一个地图并且添加了一个 tile layer。然后创建了一个 feature group 用来存储绘制的图形。第三步是创建绘图控件，并且将它添加到地图中。最后是监听绘图完成事件并且输出 GeoJSON 格式的数据到控制台。

深入了解 leaflet-draw

绘图控件

绘图控件是 leaflet-draw 的核心组件，我们可以通过控件选项来配置绘图功能。控件选项有两个主要配置：draw 和 edit。draw 选项用来配置绘图功能，比如我们可以开启或关闭画点、画线、画多边形等功能。edit 选项用来配置编辑功能，比如我们可以设置编辑完成后的 feature group。

以下是绘图控件选项的完整配置：

// www.javascriptcn.com code example
const drawControl = new L.Control.Draw({
  draw: {
    marker: true, // 画点
    polyline: true, // 画线
    polygon: true, // 画多边形
    circle: true, // 画圆
    rectangle: true, // 画矩形
  },
  edit: {
    featureGroup: drawnItems, // feature group
    remove: true, // 允许删除图形
  },
  position: 'topright', // 控件位置
  collapsed: true, // 是否折叠
  metric: ['km', 'm'], // 距离单位
});

绘制事件

在上面的示例中，我们监听了绘图完成事件 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

npm 包 leaflet-draw 使用教程