React中自定义按钮触发Geoman事件，如何获取pm:create的shape和layer

要实现按钮触发handlingSplit()，核心是获取该函数需要的shape和layer参数，以下是几种实用的实现方式：

方式一：通过选中图层获取参数，手动调用函数 #

先让用户选中要分割的目标图层，再通过按钮直接传入参数调用handlingSplit：

1. 维护选中图层的状态

const [selectedLayer, setSelectedLayer] = useState(null);

2. 监听Geoman的图层选中/取消事件，更新状态

useEffect(() => {
  const handleSelect = ({ layer }) => setSelectedLayer(layer);
  const handleDeselect = () => setSelectedLayer(null);

  map.on('pm:select', handleSelect);
  map.on('pm:deselect', handleDeselect);

  return () => {
    map.off('pm:select', handleSelect);
    map.off('pm:deselect', handleDeselect);
  };
}, [map]);

3. 按钮点击时触发分割逻辑

const onSplitButtonClick = () => {
  if (!selectedLayer || mapMode !== MapMode.SPLIT_SPACES) return;
  
  // 分割操作对应的shape通常为"Polygon"，根据你的工具类型调整
  handlingSplit('Polygon', selectedLayer);
  setMapMode(MapMode.NONE);
};

// 按钮组件
<button onClick={onSplitButtonClick} disabled={!selectedLayer}>
  执行分割
</button>

方式二：手动触发pm:create事件复用原有逻辑 #

如果不想修改原有事件监听逻辑，可以构造模拟的pm:create事件并触发，让原有代码自动处理：

const onSplitButtonClick = () => {
  if (!selectedLayer || mapMode !== MapMode.SPLIT_SPACES) return;
  
  // 构造与pm:create事件一致的参数
  const mockCreateEvent = {
    shape: 'Polygon', // 匹配你的分割工具对应的shape类型
    layer: selectedLayer
  };
  
  // 触发事件，原有useEffect中的监听器会自动处理
  map.fire('pm:create', mockCreateEvent);
};

方式三：重构handlingSplit解耦参数依赖 #

如果handlingSplit的逻辑可以脱离shape参数（比如可以从图层本身推断类型），可以重构函数减少依赖：

// 重构后的handlingSplit，直接传入图层即可
const handlingSplit = (layer) => {
  // 从图层实例推断shape类型
  const shape = layer instanceof L.Polygon ? 'Polygon' : 
                layer instanceof L.Rectangle ? 'Rectangle' : 'Unknown';
  
  // 原有业务逻辑...
};

// 按钮点击触发
const onSplitButtonClick = () => {
  if (!selectedLayer || mapMode !== MapMode.SPLIT_SPACES) return;
  
  handlingSplit(selectedLayer);
  setMapMode(MapMode.NONE);
};

注意事项 #

• 确保用户在点击按钮前已选中目标图层，可以通过按钮disabled状态提示
• shape参数的取值需要与你的SPLIT_SPACES模式对应的Geoman工具匹配，比如分割多边形工具对应"Polygon"

内容的提问来源于stack exchange，提问作者FE-P