使用react-leaflet和hook清除地图图层

Question

我正在为react-leaflet构建自定义插件，以使用传单的locate方法定位用户。

基本上是有效的，但有一个问题是在关闭位置再重新打开之间无法清除图层。每次切换定位按钮时，locate应该重新开始。

这里是问题的codesandbox。切换按钮时，由于图层彼此堆叠，圆圈变得更暗。

这里是组件：

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的mentions in a comment above：

将圆添加到featureGroup，然后每次触发locationfound时，调用featuregroup.clearLayers()，然后将新的圆添加到featureGroup

这解决了问题。

工作代码和框是here