Последняя версия API Яндекс Карт подойдет всем.
Но нет предела совершенству.
Я хотел, чтобы фильтрация объектов на карте происходила через затухание.
Давайте посмотрим, возможно ли это.
Цель состоит в том, чтобы при фильтрации одного или нескольких объектов на карте скрытие остальных происходило с эффектом.
Например, с повышением прозрачности.
Начнем копать.
Доступа к DOM-элементам маркеров, как и к другим геообъектам, в API нет. Что, в целом, правильно.
В зависимости от браузера и способа отображения геообъектов это может быть как несколько вложенных DOM-элементов, так и картинка, нарисованная на холсте.
Давайте копнем глубже.
Что у нас есть, из чего мы можем получить элемент DOM, чтобы позже присвоить ему класс CSS с переходом и непрозрачностью? Вот оно — это свойство панели в настройках геообъекта.
Каждый геообъект имеет слой (панель), на котором он отображается.
Давайте посмотрим, какие слои бывают:
'ground': pane.MovablePane (zIndex: 100) — самая нижняя панель, предназначенная для размещения фона карты; 'areas': pane.MovablePane (zIndex: 200) - панель площадных объектов, таких как полигоны; 'shadows': pane.MovablePane (zIndex: 300) — панель теней объектов карты, расположенных выше; 'places': pane.MovablePane (zIndex: 400) — панель точечных объектов, таких как метки; 'events': pane.EventsPane (zIndex: 500) - панель, предназначенная для прослушивания событий карты; 'overlaps': pane.MovablePane (zIndex: 600) - панель для объектов, не требующих использования активных областей для реализации их интерактивности; 'balloon': pane.MovablePane (zIndex: 700) — всплывающая панель; 'outerBalloon': pane.MovablePane (zIndex: 800) — внешняя краска балуна; 'controls': pane.StaticPane (zIndex: 900) — панель элементов управления картой; 'авторские права': pane.StaticPane (zIndex: 1000) – панель авторских прав; 'hint': pane.StaticPane (zIndex: 1100) — подсказка-подсказка; 'outerHint': pane.StaticPane (zIndex: 1200) — внешняя подсказка.Теперь нас интересует слой места Также имеется слой теней и областей.
Итак, если у нас есть объекты с тенями или полигонами, с ними тоже придется работать.
Но сейчас нас интересует сам принцип.
Каждый слой имеет свойство getElement(), которое дает нам доступ к элементу DOM. Давайте добавим еще один слой на карту.
Теперь добавим стилиvar selectedPane = new ymaps.pane.MovablePane(myMap, { zIndex: 420}), myMap.panes.append('selected', selectedPane);
.
hiding ymaps {
transition: opacity 1s;
}
.
hidden ymaps {
opacity: 0;
}
Теперь мы можем присвоить нашему основному слою, на котором отображаются метки, класс CSS.
var placesPane = myMap.panes.get('places').
getElement();
$(placesPane).
addClass('hiding');
Большой! Теперь, если мы дадим нашему основному слою класс CSS прячется И скрытый — получаем эффект затухания в 1 секунду! Остается только следить за тем, чтобы выбранные (отфильтрованные) маркеры не исчезли вместе с остальными.
И для этого у нас есть новый слой выбранная панель ! Переместите наши метки на выбранную панель.
myPlaceMark.options.set('pane', 'selected');
И установите слой с оставшимися метками в скрытый класс CSS. var placesPane = myMap.panes.get('places').
getElement(); $(placesPane).
addClass('hidden');
Ах, да! Все красиво исчезает.
В скрипка теги фильтруются по клику на тег и возвращаются обратно через секунду.
То же самое можно сделать с коллекциями, фильтрами и т. д. Могут быть добавлены другие эффекты.
Например, вы можете задать элементы Transform(translate(@x, @y)) со случайными координатами вне области просмотра — тогда метки будут «разбегаться» при фильтрации.
Простор для фантазии здесь огромен.
Надеюсь, это было полезно.
Теги: #API yandex карт #API Карт #API Яндекса
-
Обзор Последних Материалов, Сентябрь 2010 Г.
19 Oct, 24 -
Словарь Компьютерных Терминов
19 Oct, 24 -
Тотальное Протезирование На Имплантах
19 Oct, 24 -
Твиттер, Музыка И Озорные Медведи
19 Oct, 24
