如何禁用Leaflet-draw圆形的拖拽功能并保留缩放？

要实现保留圆形的大小调整功能，同时禁用圆心拖拽移动的需求，有两种直接的实现方式：

方式一：创建圆形时配置编辑规则 #

在初始化L.Circle的时候，通过editing选项直接禁用拖拽：

const circle: any = new L.Circle(latLng, {
  radius: 1609.34, // 1英里（单位：米）
  editing: {
    draggable: false // 关闭拖拽功能
  }
});

drawnItems.addLayer(circle);
circle.editing.enable();

方式二：启用编辑后禁用拖拽 #

如果已经创建好圆形，也可以在启用编辑后，调用编辑对象的disableDrag方法：

const circle: any = new L.Circle(latLng, {
  radius: 1609.34, // 1英里（单位：米）
});

drawnItems.addLayer(circle);
circle.editing.enable();
circle.editing.disableDrag(); // 禁用拖拽

额外优化：避免重复添加绘制控件 #

你的代码里每次点击地图都会新建Draw.Control，这会导致地图上出现多个重复的绘制控件。建议把绘制控件的初始化逻辑移到点击事件外面，只执行一次：

// 全局/组件初始化阶段执行一次
const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

const drawControl = new L.Control.Draw({
  draw: {
    circle: true,
  },
  edit: {
    featureGroup: drawnItems // 关联到已创建的featureGroup
  }
});
map.addControl(drawControl);

// 点击事件内仅处理圆形创建
onMapClick(leafletMouseEvent: LeafletMouseEvent) {
  const latLng = leafletMouseEvent.latlng;
  const circle: any = new L.Circle(latLng, {
    radius: 1609.34,
    editing: {
      draggable: false
    }
  });
  
  drawnItems.addLayer(circle);
  circle.editing.enable();
}

设置完成后，圆形就只能通过边缘的抓手调整大小，无法拖拽移动圆心了。

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