Leaflet Geoman插件实现长按绘制矩形的技术咨询

现状说明 #

Leaflet-Geoman官方暂未支持矩形工具的长按拖动释放完成绘制特性，相关特性请求已提交但尚未实现。以下是自定义实现方案，替代原生两次点击的绘制逻辑。

实现步骤与代码 #

1. 禁用原生矩形绘制交互

先关闭Geoman默认的矩形绘制工具，避免和自定义逻辑冲突：

// 初始化Geoman后执行
map.pm.disableDraw('Rectangle');

2. 自定义长按拖动绘制逻辑

通过监听地图的鼠标事件，手动实现长按触发、拖动更新、释放完成的流程：

let isLongPress = false;
let startLatLng = null;
let tempRectangle = null;
let longPressTimer = null;

// 长按判定阈值（毫秒），可根据需求调整
const LONG_PRESS_THRESHOLD = 300;

// 监听鼠标按下事件
map.on('mousedown', (e) => {
  // 仅在矩形工具激活时生效（可通过自定义按钮控制工具状态）
  if (!map.pm.globalDrawModeEnabled || map.pm.getDrawMode() !== 'Rectangle') return;
  
  startLatLng = e.latlng;
  // 启动长按定时器
  longPressTimer = setTimeout(() => {
    isLongPress = true;
    // 创建临时矩形图层
    tempRectangle = L.rectangle([startLatLng, startLatLng], {
      color: '#3388ff',
      fillColor: '#3388ff',
      fillOpacity: 0.2,
      draggable: false
    }).addTo(map);
  }, LONG_PRESS_THRESHOLD);
});

// 监听鼠标移动事件
map.on('mousemove', (e) => {
  if (!isLongPress || !tempRectangle) return;
  // 更新矩形的对角坐标
  tempRectangle.setBounds([startLatLng, e.latlng]);
});

// 监听鼠标释放事件
map.on('mouseup', () => {
  clearTimeout(longPressTimer);
  if (!isLongPress || !tempRectangle) {
    // 非长按操作，直接清除临时状态
    startLatLng = null;
    return;
  }
  
  // 将临时矩形转为Geoman可编辑的图层
  tempRectangle.pm.enable({
    draggable: true,
    resizable: true
  });
  
  // 触发Geoman的create事件，保持和原生逻辑的一致性
  map.fire('pm:create', {
    layer: tempRectangle,
    shape: 'Rectangle'
  });
  
  // 重置状态
  isLongPress = false;
  startLatLng = null;
  tempRectangle = null;
});

// 监听鼠标离开地图事件，避免异常状态
map.on('mouseout', () => {
  clearTimeout(longPressTimer);
  if (tempRectangle) {
    map.removeLayer(tempRectangle);
  }
  isLongPress = false;
  startLatLng = null;
  tempRectangle = null;
});

3. 适配移动端（可选）

如果需要支持移动端触摸操作，可添加对应的touch事件监听，逻辑和鼠标事件一致：

// 触摸按下
map.on('touchstart', (e) => {
  const touchLatLng = e.latlng;
  // 复用mousedown的逻辑，替换startLatLng为touchLatLng即可
});

// 触摸移动
map.on('touchmove', (e) => {
  const touchLatLng = e.latlng;
  // 复用mousemove的逻辑，替换e.latlng为touchLatLng即可
});

// 触摸结束
map.on('touchend', () => {
  // 复用mouseup的逻辑即可
});

注意事项 #

• 需通过自定义按钮控制矩形工具的激活状态（比如点击按钮时设置map.pm.enableDraw('Rectangle')，禁用原生交互后仅作为状态标记）
• 自定义实现的图层需确保和Geoman的编辑、删除等功能兼容
• 长按阈值可根据用户体验调整，建议设置在200-500ms之间

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