1

在此处输入图像描述

我应该如何隐藏 Leaflet Routing Machine 路由和 mouseout 事件的标记？

目前，我有常规的 Leaflet 标记，它有 mouseover/mouseout 事件。当触发 mouseover 事件并使用创建属于该标记的路由时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 类名称并尝试设置display: none，但将类分配给许多不同的路由是解决此问题的一种非常混乱的方法。

如果你想玩，这个演示非常简洁。（按预期更新作品）在此处获取

4

2 回答 2

2

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

这样的函数将计算一次值，然后将其存储并在再次请求时返回存储的值。

例如：

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 上有几个实现。

于 2020-08-03T20:42:18.580 回答
1

解决方案是创建一次路线并将其保存在某处以供以后使用。就我而言，它保存在 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();

你可以在这里找到一个工作演示

于 2020-08-11T11:16:02.933 回答