Leaflet Routing Machine 在不使用 .remove() 的情况下隐藏路由

Question

我应该如何在 mouseout 事件中隐藏 Leaflet Routing Machine 路线和标记？

目前，我有常规的 Leaflet 标记，其中有 mouseover/mouseout 个事件。当触发鼠标悬停事件并使用 L.Routing.control

创建属于该标记的路线时

    route = L.Routing.control({
      show: false,
      addWaypoints: false,
      draggableWaypoints: false,
      fitSelectedRoutes: false,
      waypoints: [
        L.latLng(locations.aLat, locations.aLng), // Hardcoded coordinates
        L.latLng(locations.bLat, locations.bLng), // Hardcoded coordinates
      ],
    });
    route.addTo(map);

当 mouseout 事件被触发时，我调用 route.remove() 完全删除路由。

这种方法的问题：

从 OSRM 服务器检索路由需要不到半秒的时间
每个鼠标悬停事件都会向 OSRM 服务器发送请求

我尝试在 mouseout 事件中将路由不透明度设置为 0，将标记图标大小设置为 0，但是，您不能在 Leaflet Routing Machine 中动态更改样式。

我采取的另一种方法是给路由命名 css class 并尝试设置 display: none 但是将 classes 分配给许多不同的路由真的很麻烦解决这个问题的方法。

如果你想玩的话，这个演示非常简洁。（更新后的作品符合预期） 抓住它 here

Answer 1

在这种情况下，您可能会使用相同的参数重复调用昂贵的或 IO 相关的函数，最好将该函数包装在可记忆的可调用函数中。

这样的函数将计算一次值，然后存储它，如果再次请求，return 存储的值。

例如：

function very_expensive(argument) {
    //.....
    return stuff
}

let cache = {}

function from_cache(argument) {
    if (!(argument in cache)) {
        cache[argument] = very_expensive(argument);
    }

    return cache[argument]
}

隐藏但不移除的问题是该层仍在 DOM 中，并且如果您有很多这些不可见元素（如果您的用户滚动了很多元素，这可能会很快发生）标记），这会降低性能。这也是一个更混乱的解决方案。

出于同样的原因，使用 lru 缓存，因为它只存储最近的缓存，防止缓存无限增长。如果您不自己动手，NPM 上有多种实现方式。

Answer 2

解决方案是创建一次路线并将其保存在某个地方供以后使用。在我的例子中，它保存在 marker.options

marker = L.marker(pointA, {
options: {
  route: createRoute(pointA, pointB), // Function that return route object(L.Routing.control)
 },
})

创建路线后，您可以：

检查它是否在地图上：
if (marker.options.options.route._map) { Do something }
将其添加到地图中：
marker.options.options.route.addTo(map);
将其从地图中删除：
marker.options.options.route.remove();

您可以找到一个工作演示 here

Leaflet Routing Machine 在不使用 .remove() 的情况下隐藏路由

Leaflet Routing Machine hide route without using .remove()

javascript

leaflet

leaflet-routing-machine