TLDR；有没有办法使用 react-leaflet 和 react-leaflet-markercluster 从标记簇中清除所有标记？
编辑：是的，有！正如@SethLutske 推荐的那样，我刚刚向 MarkerClusterGroup 添加了一个关键道具。现在，每次重新渲染地图时，之前的标记都会被删除，只剩下新的标记。
<MarkerClusterGroup
key={uuidv4()}
spiderfyDistanceMultiplier={1}
showCoverageOnHover={true}
>
我在我所在州的公安机关工作。有一个 API 可以从我所在州的所需城市获取监控摄像头的集合。我正在使用 React PWA 来检索这些摄像头的图像，因此警察可以使用我的应用程序进行实时监控。警察在系统中进行身份验证，使用表格按城市过滤摄像机，结果显示在地图中，地图上带有指示每个摄像机位置的标记。触摸标记时，会显示一个弹出窗口，其中包含该摄像机的信息和一个按钮，触摸时在新页面中显示摄像机图像。
我选择 Leaflet 和 react-leaflet 进行地图渲染，并选择 react-leaflet-markercluster 来对彼此相邻的标记进行分组。我有一个小问题：如果用户按城市过滤相机，然后他返回表单并决定按不同城市过滤，我想要发生的行为是：
- 清除上一个被过滤城市的所有标记；
- 显示当前城市的所有标记；
但实际情况是这样的：前一个城市的标记仍保留在地图中，但弹出窗口为空。
我的目标：我想在添加新城市的标记之前清除过去的城市标记！
这是我的 MapContainer。尽管我提到了错误，但它工作得很好。
<MapContainer
center={[-26.627817, -51.196288]}
zoom={6}
scrollWheelZoom={false}
style={{ height: '100vh', width: '100wh' }}
>
{//<ClearLayers /> this clears the entire map, even the tile layer, leaving it blank
}
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MarkerClusterGroup
spiderfyDistanceMultiplier={1}
showCoverageOnHover={false}
>
{cameras.map((camera: Camera) => (
<Marker icon={iconBTV} key={camera.name} position={[camera.latitude, camera.longitude]}>
<Popup>
{camera.name} <br /> {camera.description} <br />
<Link
to={{
pathname: "/cameraScreen",
}}
style={{ textDecoration: 'none' }}
>
<button
style={{marginTop: "1rem"}}
onClick={(e) => insertLog(e, camera)}
>Ver câmera</button>
</Link>
</Popup>
</Marker>
))}
</MarkerClusterGroup>
</MapContainer>
我尝试使用此功能，但它没有按我的意愿工作。它会破坏地图，使其完全空白。
function ClearLayers() {
const map = useMap();
map.eachLayer(function (layer) {
map.removeLayer(layer);
});
return null
}
我在这里搜索并接近解决方案：我能够通过使用 Leaflet 的核心 API 并留下 react-leaflet-markercluster 包装器来清除过去的城市标记，如this answer所示。在向 MCG 添加新标记之前，我确实执行了 clearLayers()，这样就可以了。这是我试图做的：
import * as L from 'leaflet';
import 'leaflet.markercluster';
import { useMap } from 'react-leaflet';
import { useContext, useEffect } from 'react';
import { Link } from 'react-router-dom';
import CameraContext from '../../contexts/CameraContext';
const mcg = L.markerClusterGroup({
chunkedLoading: true,
showCoverageOnHover: false,
});
const MarkerCluster = ({ markers, icon }) => {
const { setCamera } = useContext(CameraContext);
const inserirLog = (e, camera) => {
setCamera(camera);
var ajax_log = new XMLHttpRequest();
ajax_log.open('GET', `https://fakeurl.sc.gov.br/api/ajax-log-bemtevi.php?camera=${camera.nome}&servidor=${camera.servidor}`);
ajax_log.send();
}
console.log(markers);
const map = useMap();
useEffect(() => {
mcg.clearLayers();
const markerList = markers.map((camera) => {
return L.marker(new L.LatLng(camera.latitude, camera.longitude), {
icon: icon,
}).bindPopup(
`
${camera.name} <br /> ${camera.description} <br />
<Link
to={{
pathname: "/cameraScreen",
}}
style={{ textDecoration: 'none' }}
>
<button
style={{marginTop: "1rem"}}
onClick={(e) => insertLog(e, camera)}
>Watch camera</button>
</Link>
`
);
});
mcg.addLayers(markerList);
map.fitBounds(mcg.getBounds());
map.addLayer(mcg);
}, [markers, icon, map]);
return null;
};
export default MarkerCluster;
通过这样做，我无法在 Popup 中注入 JSX，也无法使用 react-router-dom 中的 Link 组件。我也无法将相机对象保存在上下文中以在下一页中进一步使用它。因此，尽管存在“无法清除过去的城市标记”错误，但我最终还是坚持使用当前的代码，这是有效的。
所以我想在使用 React 组件用于 Leaflet map 和 Marker Cluster 时有一种方法可以清除过去的城市标记。如果 MarkerClusterGroup 有一个钩子，就像 Leaflet 地图有一个钩子一样，我想这会更容易做到：我需要做的就是这样简单的事情：
const markercluster = useMarkerClusterGroup();
markercluster.clearLayers();
但是，据我所知，react-leaflet-markercluster 中没有钩子。