Как удалить существующие многоугольники, которые накладываются на недавно отредактированные многоугольники на карте, перерисовывая нарисованные элементы новыми формами

Question

Во-первых, я новичок в использовании Leaflet. js, и я надеюсь, что кто-то здесь поможет мне.

Я пытаюсь нарисовать многоугольники на карте. Когда я нажимаю на многоугольник, я могу редактировать форму многоугольника, а также видеть детали формы, такие как имя, тип многоугольника.

Итак, всякий раз, когда рисуется или редактируется новый многоугольник, я пытался перерисовать нарисованные элементы на карте с помощью вновь созданных или обновленных значений.

Здесь возникает проблема после редактирования или создания нового нарисованные предметы рисуются над ранее нарисованными предметами.

Например , если я отредактирую многоугольник 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()
  });
 }