Leaflet折线重绘移动端性能问题排查求助

针对你遇到的移动设备上Leaflet地图切换路线卡顿、闪烁问题，结合你的代码来看，大概率不是内存泄漏，而是几个Leaflet与React结合时的常见性能优化点没做到位，下面是具体的修复方案：

1. 复用Canvas渲染器，避免重复创建 #

你现在每次生成折线都新建L.canvas()实例，移动设备上频繁创建销毁渲染器会额外消耗性能。把渲染器缓存起来复用：

// 在组件内用useMemo缓存渲染器实例
const canvasRenderer = useMemo(() => L.canvas({ padding: 1 }), []);

// 在createHintsForGuestPreview函数里替换成缓存的渲染器
if (hint.route) {
    const route = hint.route.map((route) => [route.latitude, route.longitude]);
    polyLine = L.polyline(route, {
        color: ROUTE_LINE_COLOR,
        opacity: 0.6,
        weight: 5,
        dashArray: "15, 10",
        smoothFactor: 3,
        renderer: canvasRenderer // 复用同一个渲染器
    });
}

2. 彻底清理旧图层，避免残留 #

当前代码只调用clearLayers()但没把旧的layerGroup从地图上移除，导致旧图层残留，既占内存又会引发闪烁：

useEffect(() => {
    if (map && selectedPath) {
        (async () => {
            // 先把旧的layerGroup从地图上移除，再清理内部图层
            if (mapRef.current) {
                map.removeLayer(mapRef.current);
                mapRef.current.clearLayers();
            }
            const layers = await createHintsForGuestPreview(selectedPath.hints, map);
            const cluster = clusterMarkers(layers.markers, map);

            mapRef.current = L.layerGroup().addTo(map);
            mapRef.current.addLayer(cluster);
            if (layers.polyLine) {
                mapRef.current.addLayer(layers.polyLine);
            }

            // ... fitBounds逻辑
        })();
    }
    // 组件卸载时也要彻底清理
    return () => {
        if (mapRef.current) {
            map.removeLayer(mapRef.current);
            mapRef.current.clearLayers();
            mapRef.current = null;
        }
    };
}, [map, selectedPath]);

3. 处理异步竞态，避免旧任务干扰 #

用户快速切换选项时，之前的异步请求还在执行，会导致旧图层覆盖新图层，引发闪烁。加个取消标记终止旧任务：

useEffect(() => {
    let isCancelled = false;
    if (map && selectedPath) {
        (async () => {
            if (isCancelled) return;

            // 清理旧图层
            if (mapRef.current) {
                map.removeLayer(mapRef.current);
                mapRef.current.clearLayers();
            }

            const layers = await createHintsForGuestPreview(selectedPath.hints, map);
            if (isCancelled) return;

            const cluster = clusterMarkers(layers.markers, map);
            if (isCancelled) return;

            // 创建新图层
            mapRef.current = L.layerGroup().addTo(map);
            mapRef.current.addLayer(cluster);
            if (layers.polyLine) {
                mapRef.current.addLayer(layers.polyLine);
            }

            // ... fitBounds逻辑
        })();
    }
    // 切换或卸载时标记任务取消
    return () => {
        isCancelled = true;
        if (mapRef.current) {
            map.removeLayer(mapRef.current);
            mapRef.current.clearLayers();
            mapRef.current = null;
        }
    };
}, [map, selectedPath]);

4. 优化fitBounds执行逻辑 #

移动设备上频繁调用fitBounds会触发地图重绘，导致卡顿。可以关闭动画，或者只在边界变化明显时执行：

const prevBoundsRef = useRef(null);

useEffect(() => {
    // ... 其他逻辑
    const routeBounds = selectedPath.hints.map((route) =>
        L.latLng(parseFloat(route.latitude), parseFloat(route.longitude))
    );
    const newBounds = L.latLngBounds([
        ...routeBounds,
        L.latLng(location.latitude, location.longitude),
    ]);
    // 只有边界变化时才执行fitBounds，且关闭动画
    if (!prevBoundsRef.current || !prevBoundsRef.current.equals(newBounds)) {
        map.fitBounds(newBounds, { animate: false });
        prevBoundsRef.current = newBounds;
    }
}, [map, selectedPath, location]);

5. 优化Marker Cluster性能 #

如果标记点数量多，聚类逻辑可能成为移动设备的性能瓶颈。调整聚类参数减少计算量：

// 示例：修改clusterMarkers内部的聚类配置
const cluster = L.markerClusterGroup({
    minClusterSize: 5, // 减少聚类触发次数
    disableClusteringAtZoom: 15, // 缩放足够大时停止聚类
    maxClusterRadius: 30 // 减小聚类范围，降低计算量
});
cluster.addLayers(layers.markers);

内容的提问来源于stack exchange，提问作者Danilo Kujacic