如何使用Leaflet-Geoman仅编辑GeoJSON中选中的要素

针对40000个MultiPolygon要素导致的全选编辑崩溃问题，核心思路是仅让单个要素处于编辑状态，避免一次性加载大量编辑控件，具体实现步骤如下：

1. 初始加载时禁用全局编辑权限 #

加载GeoJSON时，不给所有要素默认开启编辑，而是通过点击事件单独触发：

const geoJsonLayer = L.geoJSON(yourGeoJsonData, {
  onEachFeature: (feature, layer) => {
    // 初始禁用编辑状态
    layer.pm.disable();
    // 绑定点击事件切换当前要素的编辑状态
    layer.on('click', (e) => {
      // 先关闭其他所有要素的编辑状态，释放资源
      geoJsonLayer.eachLayer(l => {
        if (l !== e.target) {
          l.pm.disable();
          l.pm.clearLayers(); // 清除编辑控制点，减少DOM节点
        }
      });
      // 切换当前点击要素的编辑状态
      e.target.pm.enabled() ? e.target.pm.disable() : e.target.pm.enable();
    });
  }
}).addTo(map);

2. 自定义工具栏行为，避免全选编辑 #

默认的Leaflet-Geoman编辑按钮会选中所有要素，需要禁用该按钮，替换为自定义逻辑：

// 移除默认的全局编辑按钮
map.pm.Toolbar.removeControl('edit');
// 添加自定义编辑触发按钮（可选，用于提示用户操作）
map.pm.Toolbar.addControl({
  name: 'editSingle',
  title: '点击单个多边形进行编辑',
  className: 'leaflet-pm-icon-edit',
  onClick: () => {
    alert('请点击地图上的多边形开始编辑');
  }
});

3. 处理MultiPolygon拆分（可选） #

如果需要编辑MultiPolygon中的单个Polygon，而非整个MultiPolygon，先将MultiPolygon拆分为单个Polygon图层：

// 拆分MultiPolygon为独立的Polygon要素
function splitMultiPolygon(geoJsonData) {
  const features = [];
  geoJsonData.features.forEach(feature => {
    if (feature.geometry.type === 'MultiPolygon') {
      feature.geometry.coordinates.forEach(polygonCoords => {
        features.push({
          type: 'Feature',
          properties: {...feature.properties},
          geometry: {
            type: 'Polygon',
            coordinates: polygonCoords
          }
        });
      });
    } else {
      features.push(feature);
    }
  });
  return { type: 'FeatureCollection', features };
}

// 使用拆分后的GeoJSON加载图层
const splitGeoJson = splitMultiPolygon(yourGeoJsonData);
const geoJsonLayer = L.geoJSON(splitGeoJson, {
  onEachFeature: (feature, layer) => {
    layer.pm.disable();
    layer.on('click', (e) => {
      geoJsonLayer.eachLayer(l => {
        if (l !== e.target) {
          l.pm.disable();
          l.pm.clearLayers();
        }
      });
      e.target.pm.enabled() ? e.target.pm.disable() : e.target.pm.enable();
    });
  }
}).addTo(map);

关键原理 #

一次性开启40000个要素的编辑状态会生成大量DOM控制点，导致浏览器内存溢出。通过每次仅激活单个要素的编辑状态，并及时清理其他要素的编辑控件，可大幅降低资源占用，避免崩溃。

内容的提问来源于stack exchange，提问作者Muhammad Hamza Khan