单张重画折线性能

Question

我创建了 Leaflet OSM 地图和菜单，用户可以在其中选择其中一个选项。每个选项都会导致地图删除之前的折线并绘制另一条折线。在桌面设备上它工作顺利，但一旦我在移动设备上尝试它，地图就会开始滞后、闪烁等。

我希望地图能够在所有设备上顺利运行，重绘路线似乎不需要很大的计算。一定是某个地方内存泄漏

我编写所有逻辑的 useEffect 函数（react）

useEffect(() => {
        if (map && selectedPath) {
            (async () => {
                if (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);
                }

                const routeBounds = selectedPath.hints.map((route) =>
                    L.latLng(parseFloat(route.latitude), parseFloat(route.longitude))
                );

                map.fitBounds([
                    ...routeBounds,
                    L.latLng(location.latitude, location.longitude),
                ]);
            })();
        }
    }, [map, selectedPath]);

这就是我创建实际折线的地方（在 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: L.canvas({
                        padding: 1,
                    }),
                });
            }

Answer 1

您似乎有记忆滞后的问题。 要尝试解决它，请尝试优化您的代码，或检查兼容性问题，或使用不同的渲染器。

另外，我在 GitHub 上发现了这个问题，可能会对您有所帮助：https://github.com/Leaflet/Leaflet/issues/7341