Javascript 如何删除与地图上新编辑的多边形重叠的现有多边形，同时使用新形状重新绘制绘制的项目

首先，我是个新手，我希望这里有人能帮我

我试图在地图上画多边形形状。当我点击多边形时，我可以编辑多边形形状，也可以查看形状的详细信息，如名称、多边形类型

所以，每当绘制或编辑新多边形时，我都会尝试使用新创建或更新的值在地图上重新绘制绘制的项目

这里的问题是在编辑或创建后，新绘制的项目将绘制在先前绘制的项目之上

例如，如果我编辑多边形形状5次，我在地图上有5个层。请帮助我删除以前绘制的项目

   static getDerivedStateFromProps(props, state) {
     if (!state.typeSelected) {
      props.types.map(({ key }) => {
      drawnItems[key] = new L.FeatureGroup();
      map.addLayer(drawnItems[key]);
      return true;
     });
    return { typeSelected: props.types[0] };
   }
   if (props.createAction.success === true || 
         props.editAction.success === true) {
         props.actionClear();
         return {
           ...state,
         popup: false,
         info: {
            ...state.info,
            id: '',
            name: '',
            geometry: ''
         }
       };
      }
     return state;
    }

     componentDidMount() {
       const { user, actionFetchTypes, actionFetch } = this.props;
       if (user.id) {
         actionFetch();
         actionFetchTypes();
         this.initializeMap();
       }
      }


      componentDidUpdate(prevProps, prevState) {
        const { 
        user,
        surfaces,
        types,
        createAction,
        actionClear,
        editAction,
        deleteAction 
       } = this.props;
      const { allLayers, info, edit, layer} = this.state;
      const that = this;

       if (createAction.success === true &&  prevProps.createAction.success 
      === false) {
    this.setState({ popup: false, edit: true,
      allLayers: [{ key: -1, name: 'All Surfaces', color: '#CCCCCC' }]
     },() => {
      actionClear();
    });
   }

    if (editAction.success === true && prevProps.editAction.success === 
      false) {
      this.setState({ popup: false, edit: true, allLayers: [{ key: -1, 
       name: 'All Surfaces', color: '#CCCCCC' }]
      },() => {
      actionClear();
    });
   }
   if (!prevProps.user.id && user.id) {
     const { actionFetch, actionFetchTypes } = this.props;
     actionFetch();
     actionFetchTypes();
     this.initializeMap();
    }

   if ((allLayers.length === 1 && surfaces.length && types.length)) {
     let allLayers = [{ key: -1, name: this.props.intl.formatMessage({ 
     id: 'surface.allsurfaces' }), color: '#CCCCCC' }];
     surfaces.forEach((o) => {
      let l = L.geoJSON(o.geometry)._layers;
      [l] = Object.keys(l).map(ob => l[ob]);
      const customlayer = this.addPopupToLayer(o, l);

     map.addLayer(drawnItems[o.surface_type.id].addLayer(customlayer));
       l.on('click', (e) => {
        if (edit) {
         map.layer = e.target;
         map.eachLayer((layer) => {
           if (layer.editing && layer.editing.enabled()) {
             layer.editing.disable();
           }
         });
         e.target.editing.enable();
         that.setState({
          popup: true,
          detail: true,
          info: o,
          typeSelected: o.surface_type,
          editSurface: e.target
        });
      }
     });
     allLayers.push({
      key: o.surface_type.id,
      name: o.surface_type.name,
      color: o.surface_type.color
     });
   });
   allLayers = allLayers.filter(
     (l, index, self) => self.findIndex(
       t => t.key === l.key
     ) === index
   );
    this.setState({
      allLayers,
      counter: surfaces.length
      });
    }
  }

  addPopupToLayer = (surface, layer) => {
     const { surface_type: { color } } = surface;
     const customlayer = layer;
     customlayer.setStyle({
     fillColor: color,
     color,
     opacity: 1,
     fillOpacity: 0.48
    });
    return customlayer;
  };

 initializeMap() {
    const { user } = this.props;
    map = L.map('map', {
      center: [...user.location.coordinates].reverse(),
      zoom: 15,
      editable: true,
     });
     L.gridLayer.googleMutant({ type: 'satellite', maxZoom: 20 
   }).addTo(map);

  // creation callback for triggering form.
  const that = this;
  map.on(L.Draw.Event.CREATED, (e) => {
    drawnItems[that.state.typeSelected.key].addLayer(e.layer);
    utils.toggleZooming(map, 'disable');
    that.setState({ popup: true, layer: e.layer });
  });
  map.on('draw:drawstart', (e) => {
    that.drawNewSurface()
  });
 }

---

为什么你不只是更新Latlngs？或更新选项/属性。你不必每次都创建一个新的layer@FalkeDesign我尝试更新latlngs/选项，而不是在多边形细节发生更改时创建一个层，如果单击它，将显示以前的值。这就是我想用新数据创建一个图层的原因。你能把完整的代码发布到某个地方吗？@Falke Design在上面发布了完整的代码。你能检查一下吗？对不起，我不懂你的代码。除非您在JSFIDLE上没有运行在线版本或类似的东西，否则我无法帮助您。但也许您必须看一下这行：

map.addLayer（drawnItems[o.surface\u type.id].addLayer（customlayer））在这里添加新层。尝试先从地图中删除同一图层