Leaflet Routing Machine скрывает маршрут без использования .remove ()

Question

How do should I hide the Leaflet Routing Machine route and markers on mouseout event?

Currently, I have regular Leaflet marker, that has mouseover/mouseout events. When mouseover event is fired and route belonging to that marker is created using 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);

When mouseout event is triggered I call route.remove() which deletes the route completely.

The problem with this approach:

• It takes a little bit less than half a second to retrieve route from OSRM server
• Every single mouseover event sends a request to an OSRM server

I have tried to set route opacity to 0 and marker icon size to 0 on mouseout event, however, you cannot dynamically change styles in Leaflet Routing Machine.

Another approach I took was to give css class names to routes and try to set display: none but assigning classes to many different routes is a really messy way to solve this.

The demo is quite neat if you want to play around.(Updated works as supposed to) Grab it здесь

Answer 1

В ситуациях, подобных этой, когда вы можете неоднократно вызывать дорогостоящую функцию или функцию, связанную с вводом-выводом, с теми же аргументами, лучше всего заключить эту функцию в вызываемый мемоизирующий объект.

Такая функция будет вычислять значение один раз, а затем сохраните его и верните сохраненное значение, если оно будет запрошено снова.

Например:

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();

Вы можете найти рабочую демонстрацию здесь