Как при наведении на один из маршрутов скрывать другие?

Question

[mumus]

Добавляю много маршрутов в коллекцию маршрутов, а затем на карту:

routes_collection.add(route);
myMap.geoObjects.add(routes_collection);

Как сделать, чтобы при наведении на один из маршрутов (или на одну из точек маршрута) другие скрывались, например становились opacity:0?

Comments

[freeExec]

По идее у polyline, которыми отрисованы маршруты, есть событие mouseenter, вот на него и завязывайтесь.

Answer 1

[0xD34F]

У маршрутов могут случаться события mouseenter и mouseleave. Также у маршрутов есть опция visible. Так что всё просто - цепляем к маршрутам обработчики событий, в которых переключаем visible:

const routes = new ymaps.GeoObjectCollection();
map.geoObjects.add(routes);

routesData.forEach(n => ymaps.route(n).then(route => {
  route.events.add('mouseenter', onMouseEnter.bind(route));
  route.events.add('mouseleave', onMouseLeave);
  routes.add(route);
}));

function onMouseEnter() {
  routes.each(n => n.options.set('visible', n === this));
}

function onMouseLeave() {
  routes.each(n => n.options.set('visible', true));
}