React Leaflet拖拽矩形时缩放锚点未随动问题求助

问题出在你混用了Leaflet原生的拖拽功能和Leaflet Geoman（PM）的编辑功能。原生拖拽移动矩形后，PM的编辑锚点没有同步更新位置，导致锚点留在原地。

修复步骤： #

1. 移除原生拖拽配置：删除矩形初始化时的draggable: true，改用PM自带的拖拽功能。
2. 用Ref保存矩形实例：避免状态更新时重复创建矩形，同时防止多层叠加。
3. 启用PM的拖拽与缩放：通过PM的配置启用拖拽，确保锚点随矩形同步移动。

修改后的代码： #

import { useCallback, useRef } from 'react';
import L from 'leaflet';
import { Map } from 'react-leaflet';

// 假设你已定义rectangleBounds状态和setRectangleBounds
const rectangleRef = useRef<L.Rectangle | null>(null);

const handleMapCreated = useCallback(
  (map: Map) => {
    // 移除已存在的矩形，避免重复创建
    if (rectangleRef.current) {
      map.removeLayer(rectangleRef.current);
    }

    // 创建矩形，不再使用原生draggable配置
    const rectangle = L.rectangle(rectangleBounds);
    rectangleRef.current = rectangle;
    rectangle.addTo(map);

    const updateRectangleBounds = (newBounds: L.LatLngBounds) => {
      const [sw, ne] = [newBounds.getSouthWest(), newBounds.getNorthEast()];
      setRectangleBounds([
        [sw.lat, sw.lng],
        [ne.lat, ne.lng],
      ]);
    };

    // 监听PM拖拽结束事件
    rectangle.on('pm:dragend', () => {
      updateRectangleBounds(rectangle.getBounds());
    });

    // 监听PM缩放/编辑事件
    rectangle.on('pm:edit', () => {
      updateRectangleBounds(rectangle.getBounds());
    });

    // 启用PM编辑，明确开启拖拽和缩放功能
    rectangle.pm.enable({
      draggable: true,
      resizable: true
    });
  },
  [rectangleBounds],
);

关键说明： #

• PM的编辑系统会自动维护锚点与矩形的位置关联，使用PM自带的拖拽功能时，锚点会随矩形同步移动。
• 用useRef保存矩形实例，确保每次状态更新时只会存在一个矩形，避免出现多个叠加的情况。
• 无需再监听原生拖拽事件，PM的pm:dragend事件已经覆盖了拖拽结束后的逻辑。

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