从传单地图中删除所有 divIcon，然后恢复它们

Question

我想在缩放级别 < 16 时从地图中删除所有 divIcon，

    <MapContainer className="leaflet-map" center={[latitude, longitude]}
        zoom={17} scrollWheelZoom={false}
        whenCreated={(map) => this.setState({ map })}>
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
    </MapContainer>

我试过map._panes.markerPane.remove();但我无法在它们删除后添加其他标记

componentDidUpdate() {
    const { map } = this.state;

    map.on('zoomend', function () {
        var currentZoom = map.getZoom();
        if (currentZoom < 16) {
            //map._panes.markerPane.remove();
        } else {
                    L.marker(latitude, longitude], {
                        icon: new L.DivIcon({
                            className: 'my-div-icon',
                            iconSize: [5, 5],
                            html: '<p class="my-div-span">' + name + '</p>'
                        })
                    })
                        .addTo(map);
        }
    });
}

Answer 1

虽然我不完全理解您是如何添加标记的，以及您从哪里获得纬度、经度和名称，但您必须将标记存储在一个数组中，然后使用地图引用将它们从地图中删除。因此，如果我们考虑到当放大到等于或大于 16 的地图级别时，否则您将使用相同的文本复制相同的标记，并且如果多次添加相同的文本，文本将变为粗体，您应该做类似这样的事情：

const markers = []; // here define an empty array
    
class Map extends Component {
      state = { map: null };
    
      componentDidUpdate(prevProps, prevState) {
        const { map } = this.state;
        map.on("zoomend", function () {
            var currentZoom = map.getZoom();
            console.log(currentZoom);
            if (currentZoom < 16) {
              markers.forEach((marker) => map.removeLayer(marker));
            } else {
              const marker = L.marker([latitude, longitude], {
                icon: new L.DivIcon({
                  className: "my-div-icon",
                  iconSize: [5, 5],
                  html: '<p class="my-div-span">' + name + "</p>"
                })
              });
              markers.push(marker);
              marker.addTo(map);
            }
        });
      }
   ...
 }

如果标记小于 16，则删除所有存储的标记，否则将它们添加到地图和标记数组中。

从传单地图中删除所有 divIcon，然后恢复它们

Delete all divIcon's from leaflet map then recover them

reactjs

leaflet

react-leaflet