Очистка слоев карты с помощью реакционной листовки и крючков

Question

Я создаю собственный плагин для react-leaflet, чтобы найти пользователя, используя метод листовки locate .

Это работает в основном, но с одной проблемой не очищается слой между выключением местоположения и снова включением. Каждый раз, когда переключается кнопка поиска, locate должен начинаться с fre sh.

Вот коды и поле проблемы. Когда вы переключаете кнопку, круг становится темнее, когда слои накладываются друг на друга.

Вот компонент:

import React, { useEffect, useState, useRef } from 'react'
import L from 'leaflet'
import { useLeaflet } from 'react-leaflet'
import LocationSearchingIcon from '@material-ui/icons/LocationSearching';
import MapButton from './MapButton'

function Locate() {

  const { map } = useLeaflet();

  const [locate, setLocate] = useState(false);

  function toggleLocate() {
    setLocate(!locate)
  }

  console.log(locate)

  const layerRef = useRef(L.layerGroup());

  useEffect(() => {

    if (locate) {
      map.removeLayer(layerRef.current)
      map.locate({ setView: false, watch: true, enableHighAccuracy: true }) /* This will return map so you can do chaining */
        .on('locationfound', function (e) {
          L.circleMarker([e.latitude, e.longitude], {
            radius: 10,
            weight: 3,
            color: 'white',
            fillColor: 'blue',
            fillOpacity: 1
          }).addTo(layerRef.current);
          L.circle([e.latitude, e.longitude], e.accuracy / 2, {
            weight: 1,
            color: 'blue',
            fillColor: 'blue',
            fillOpacity: 0.2
          }).addTo(layerRef.current);
          window.localStorage.setItem('accuracy', e.accuracy)
          map.setView([e.latitude, e.longitude], 16)
          layerRef.current.addTo(map)
        })
        .on('locationerror', function (e) {
          alert("Location error or access denied.");
        })
    } if (!locate) {
      map.stopLocate();
      map.removeLayer(layerRef.current);
    }
  }, [locate, map]);

  return (
    <MapButton
      title={locate ? 'Click to disable location' : 'Click to locate'}
      onClick={toggleLocate}
      left
      top={102}
    >
      <LocationSearchingIcon fontSize="small" style={{ color: locate ? 'orange' : '' }} />
    </MapButton>
  )
}

export default Locate

Буду признателен за любое решение или советы, чтобы остановить слои укладываются, и очистка идет правильно, кнопка переключается. Спасибо

Answer 1

Как упоминает от Falke Design в комментарии выше :

Добавьте круг в группу объектов, а затем каждый раз, когда запускается locationfound, вы вызываете featuregroup.clearLayers(), а затем добавьте новый круг в группу объектов

Это решило проблему.

Рабочие коды и поле здесь