本文介绍如何使用 Leaflet 的 FeatureGroup 或 LayerGroup 管理地图标记，实现在侧边栏筛选条件变更时高效清除旧标记、加载新标记，避免图层堆积与内存泄漏。
本文介绍如何使用 leaflet 的 `featuregroup` 或 `layergroup` 管理地图标记，实现在侧边栏筛选条件变更时高效清除旧标记、加载新标记，避免图层堆积与内存泄漏。
在基于 Leaflet 构建的交互式地图应用中，频繁切换筛选条件（如点击侧边栏复选框）后重新渲染标记是常见需求。若不主动清理旧标记，多次调用 addTo(map) 将导致图层重复叠加、性能下降甚至内存泄漏。关键在于——将所有动态标记统一托管到一个可控制的容器中，而非直接挂载到地图实例上。
推荐使用 L.featureGroup()（继承自 L.layerGroup()），它不仅支持批量添加/移除，还提供 clearLayers() 方法，语义清晰且操作高效：
// 创建可管理的标记容器（全局或作用域内保持引用）
const markerGroup = L.featureGroup().addTo(map);
// 清除所有现有标记（核心步骤！）
function clearMarkers() {
markerGroup.clearLayers();
}
// 重绘标记：先清空，再批量添加
async function renderMarkers(filteredData) {
clearMarkers(); // ✅ 必须放在请求前或解析前，确保干净状态
for (const item of filteredData) {
try {
const markerData = await getLatLong(item.ID);
if (markerData && markerData[0]) {
const marker = L.marker(
[markerData[0].lat, markerData[0].long],
{ icon: myIcon }
).bindPopup(
`${markerData[0].title}<a href="%24%7BmarkerData[0].link%7D">Learn more</a>`
);
markerGroup.addLayer(marker); // ✅ 添加到 featureGroup，而非直接 addTo(map)
}
} catch (err) {
console.warn('Failed to load marker for ID:', item.ID, err);
}
}
}
// 绑定侧边栏筛选事件（示例：checkbox change）
document.querySelectorAll('.filter-checkbox').forEach(checkbox => {
checkbox.addEventListener('change', async () => {
const selectedFilters = getActiveFilters(); // 自定义函数，获取当前筛选条件
const api_url = buildApiUrl(selectedFilters); // 构建新 API 地址
const response = await fetch(api_url).then(r => r.json());
await renderMarkers(response); // 触发清空 + 重绘
});
});
⚠️ 注意事项：
- 不要混用 markerClusterGroup 与 featureGroup 管理同一组动态标记（除非有明确聚类需求），二者设计目标不同；若需聚类，应调用 clusterGroup.clearLayers()。
- clearLayers() 是最简洁可靠的清除方式，优于遍历 map._layers 手动移除——后者易出错且破坏封装性。
- getLatLong() 返回 Promise，务必在 await 或 .then() 中处理异步结果，避免因并发请求导致标记顺序错乱或覆盖。
- 建议为 markerGroup 设置 pane 或 zIndex（如 L.featureGroup({ pane: 'markerPane' })）以精确控制图层层级。
通过将标记生命周期交由 FeatureGroup 统一调度，你不仅能实现「一键清空」，还能轻松扩展功能，例如添加动画过渡、统计标记数量、导出 GeoJSON 等。这是构建可维护、高性能 Leaflet 应用的基础实践。
