如何在Leaflet Editable中通过右键拖拽绘制矩形/圆形？

嘿，我对Leaflet Editable这块折腾过不少，刚好能解答你的问题：

Leaflet Editable本身默认是用左键来完成各类图形绘制的，但完全可以通过自定义事件监听改成右键拖拽的方式，核心思路是拦截右键的默认菜单，手动处理mousedown/mousemove/mouseup这三个事件模拟绘制流程，最后用Editable的API创建可编辑的正式图形。

举个具体的实现例子：

右键拖拽画矩形 #

// 初始化基础地图和Editable工具
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
map.editTools = new L.Editable(map);

// 先阻止右键默认弹出菜单，避免干扰操作
map.on('contextmenu', e => e.preventDefault());

let startPoint, tempRectangle;

// 监听右键按下事件，记录起始点并创建临时矩形
map.on('mousedown', e => {
  if (e.originalEvent.button !== 2) return; // 只响应右键（button值为2）
  startPoint = e.latlng;
  tempRectangle = L.rectangle([startPoint, startPoint], { color: '#2196F3' }).addTo(map);
});

// 鼠标拖拽时，实时更新临时矩形的边界
map.on('mousemove', e => {
  if (!tempRectangle) return;
  const bounds = L.latLngBounds(startPoint, e.latlng);
  tempRectangle.setBounds(bounds);
});

// 松开右键时，用Editable创建正式的可编辑矩形
map.on('mouseup', e => {
  if (!tempRectangle) return;
  map.removeLayer(tempRectangle);
  const finalRect = map.editTools.startRectangle(startPoint);
  finalRect.setBounds(L.latLngBounds(startPoint, e.latlng));
  finalRect.editing.enable(); // 开启编辑模式，允许后续调整
  tempRectangle = null;
});

右键拖拽画圆形 #

逻辑和矩形类似，只是把矩形换成圆形，拖拽时计算半径：

let startPoint, tempCircle;

map.on('mousedown', e => {
  if (e.originalEvent.button !== 2) return;
  startPoint = e.latlng;
  tempCircle = L.circle(startPoint, { radius: 0, color: '#F44336' }).addTo(map);
});

map.on('mousemove', e => {
  if (!tempCircle) return;
  const radius = startPoint.distanceTo(e.latlng); // 计算两点间距离作为半径
  tempCircle.setRadius(radius);
});

map.on('mouseup', e => {
  if (!tempCircle) return;
  map.removeLayer(tempCircle);
  const finalCircle = map.editTools.startCircle(startPoint);
  finalCircle.setRadius(startPoint.distanceTo(e.latlng));
  finalCircle.editing.enable();
  tempCircle = null;
});

Leaflet Editable默认用左键点击添加节点、右键点击结束/闭合多边形，但同样可以自定义实现右键拖拽绘制的效果。这类路径类图形的核心是在拖拽过程中连续添加节点，最后完成绘制：

右键拖拽画线条 #

let linePoints = [];
let tempPolyline;

map.on('mousedown', e => {
  if (e.originalEvent.button !== 2) return;
  linePoints = [e.latlng];
  tempPolyline = L.polyline(linePoints, { color: '#4CAF50' }).addTo(map);
});

// 拖拽时不断添加节点，模拟连续线条
map.on('mousemove', e => {
  if (!tempPolyline) return;
  linePoints.push(e.latlng);
  tempPolyline.setLatLngs(linePoints);
});

map.on('mouseup', e => {
  if (!tempPolyline) return;
  map.removeLayer(tempPolyline);
  const finalLine = map.editTools.startPolyline(linePoints);
  finalLine.editing.enable();
  tempPolyline = null;
  linePoints = [];
});

右键拖拽画多边形 #

和线条逻辑类似，只是最后需要闭合路径：

let polygonPoints = [];
let tempPolygon;

map.on('mousedown', e => {
  if (e.originalEvent.button !== 2) return;
  polygonPoints = [e.latlng];
  tempPolygon = L.polygon(polygonPoints, { color: '#9C27B0', fillOpacity: 0.3 }).addTo(map);
});

map.on('mousemove', e => {
  if (!tempPolygon) return;
  polygonPoints.push(e.latlng);
  tempPolygon.setLatLngs(polygonPoints);
});

map.on('mouseup', e => {
  if (!tempPolygon) return;
  map.removeLayer(tempPolygon);
  // 闭合多边形：把第一个点添加到路径末尾
  polygonPoints.push(polygonPoints[0]);
  const finalPolygon = map.editTools.startPolygon(polygonPoints);
  finalPolygon.editing.enable();
  tempPolygon = null;
  polygonPoints = [];
});

总的来说，Leaflet Editable的灵活性很高，只要通过事件拦截和自定义逻辑，完全可以实现你想要的右键拖拽绘制各类图形的需求。

内容的提问来源于stack exchange，提问作者Tenz