在React传单中编辑单个多边形

问题描述

所以我正在使用https://github.com/alex3165/react-leaflet-draw

当您单击地图外部的铅笔按钮时，我想使某些特定的多边形可编辑。现在有一个“编辑图层”按钮，但是自然可以使它们全部可编辑，我可以逐个多边形地进行编辑吗？

所以我想做这样的事情： map to edit polygons

我打开了一个问题https://github.com/alex3165/react-leaflet-draw/issues/79，但在那里没有很多成功

事情是通过refs我可以得到一个巨大的圆形物体：this is what I get when I console.log .drawControl._toolbars.edit._modes.edit.handler.options.featureGroup._layers[57]

解决方法

要考虑的一个选项是针对每个形状（特征）创建可编辑图层，而不是为特征的集合创建EditControl控件：

<FeatureGroup>
    <EditControl
      position="topright"
    />
</FeatureGroup>

从GeoJSON的每个EditControl创建feature实例：

<FeatureGroup>
    <EditControl
      position="topright"
    />
</FeatureGroup>
...
<FeatureGroup>
    <EditControl
      position="topright"
    />
</FeatureGroup>

下面的示例演示了这种方法，其中：

• 一次只能编辑一个形状
• 在单击层时发生从一个可编辑层切换到另一层

示例：

function EditableGroup(props) {
  const [selectedLayerIndex,setSelectedLayerIndex] = useState(0);

  function handleLayerClick(e) {
    setSelectedLayerIndex(e.target.feature.properties.editLayerId);
  }

  let dataLayer = new L.GeoJSON(props.data);
  let layers = [];
  let i = 0;
  dataLayer.eachLayer((layer) => {
    layer.feature.properties.editLayerId = i;
    layers.push(layer);
    i++;
  });

  return (
    <div>
      {layers.map((layer,i) => {
        return (
          <EditableLayer
            key={i}
            layer={layer}
            showDrawControl={i === selectedLayerIndex}
            onLayerClicked={handleLayerClick}
          />
        );
      })}
    </div>
  );
}

其中

function EditableLayer(props) {
  const leaflet = useLeaflet();
  const editLayerRef = React.useRef();
  let drawControlRef = React.useRef();
  let {map} = leaflet;

  useEffect(() => {
    
    if (!props.showDrawControl) {
      map.removeControl(drawControlRef.current);
    } else {
      map.addControl(drawControlRef.current);
    }

    editLayerRef.current.leafletElement.clearLayers();

    editLayerRef.current.leafletElement.addLayer(props.layer);
    props.layer.on("click",function (e) {
      props.onLayerClicked(e,drawControlRef.current);
    });
  },[props,map]);

  function onMounted(ctl) {
    drawControlRef.current = ctl;
  }

  return (
    <div>
      <FeatureGroup ref={editLayerRef}>
        <EditControl
          position="topright"
          onMounted={onMounted}
          {...props}
        />
      </FeatureGroup>
    </div>
  );
}

Here is a demo供参考