0

На проекте используется Яндекс-карта с множеством собственных иконок меток. Эти иконки создаются в виде html-разметки и, в зависимости от ряда условий, к разметке добавляется модификатор (в виде дополнительного класса к html-элементу), который немного изменяет внешний вид иконки.

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

Вот примерно так это выглядит:

    let placemark = factory.createClass(`
    <div class="map-placemark-container">
      <div class="map-placemark-small" data-placemark-id="$[properties.objectId]">
        <i class="icon-small icon-categories icon-categories-$[properties.categoryId]"></i>
      </div>
    </div>
    `, {
      build: function() {
        placemark.superclass.build.call(this);

        let properties = this.getData().properties,
            element = this.getElement().querySelector('.map-placemark-small');

        if(properties.get('categoryColor')) {
          element.style.backgroundColor = `#${properties.get('categoryColor')}`;
        }

        if(properties.get('objectStatus')) {
          let status = properties.get('objectStatus');
          element.classList
            .add('map-placemark-small_status', `map-placemark-small_status-${status}`);
        }

И все в таком духе. Хочется добавить еще один модификатор, который будет присваиваться тем объектам, на который наведен курсор мыши (и убираться, когда мышь уйдет с объекта). Я уже написал обработчик события mouseenter, и класс объекту присваивается, но сама иконка не перерисовывается.

Поэтому возникают несколько вопросов:

  1. Возможно ли поменять иконку при наведении в рамках текущего решения? Например, инициировать перерисовку иконки с новыми properties внутри обработчика mouseenter? Если нет, то каким образом грамотнее реализовать смену иконки при наведении? Добавлять выделенную иконку в особую коллекцию? Создать новый шаблон специально для таких элементов и присваивать его iconLayout при наведении?
  2. Какой подход к оформлению множества разноплановых иконок является наиболее правильным с точки зрения архитектуры карт?

Спасибо!

UPD: вот пример того, как можно решить описанную проблему. Представленный код просто чудовищен (к тому же мне пришлось продублировать полностью макет иконки в новый макет my#hovered-template, так что чудовищен вдвойне), я уверен, что можно сделать это более элегантным способом. Код ниже -- функции-обработчики, искусственно вызывающие перерисовку макета для иконки, когда на нее наведена мышь, и восстанавливающие прошлый макет и активную область иконки, когда мышь уходит с объекта.

  placemark.events.add('mouseenter', (e) => {
    let placemark = e.get('target');
    placemark.properties.set('isHovered', true);
    placemark.properties.set('lastShape', placemark.options.get('iconShape'));
    placemark.properties.set('lastTemplate', placemark.options.get('iconLayout'));
    placemark.options.set('iconLayout', 'my#hovered-placemark');
    placemark.options.set('iconShape', {
            type: 'Rectangle',
            coordinates: [[-25, -25], [25, 25]]
          });
  });

  placemark.events.add('mouseleave', (e) => {
    let placemark = e.get('target');
    placemark.options.set('iconLayout', placemark.properties.get('lastTemplate'));
    placemark.options.set('iconShape', placemark.properties.get('lastShape'));
    placemark.properties.unset(['lastShape', 'lastTemplate', 'isHovered']);
  });
1
  • Если коротко: мне нужно при наведении на объект задать ему property и вызвать функцию отрисовки макета иконки (build). Пока удалось достичь этого двумя способами: 1) при наведении на метку удалить ее с карты и заново добавить на карту 2) заново присвоить метке при наведении опцию iconLayout. Так как шаблоны заданы в строках и кэшируются, пришлось создать полную копию макета иконки. Оба способа чудовищны. 12 июл 2018 в 8:37

2 ответа 2

0

http://jsfiddle.net/3y64qo87/18/

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

placemark.options.set('iconMoreClassesForGodClasses', 'bar')
1
  • Спасибо! С самого начала пытался сделать именно так, но не получалось, из-за того, что название кастомной опции не начиналось с icon. Удалось сократить код где-то в полтора раза! 13 июл 2018 в 17:40
0

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

Как я решил проблему?

Очень просто, через работу с выборкой geoQuery. Решение выглядит примерно так:

//функция-обработчик наведения на иконку
//все объекты карты хранятся в коллекции selectedObjectCollection
setObjectHovered(id) {

  let hovered = ymaps.geoQuery(this.hoveredObjectCollection),
      all = ymaps.geoQuery(this.selectedObjectCollection),
      active = all.search(`properties.objectId = ${id}`)
                  .search('geometry.type = "Point"');
  //сбрасываем модификатор у прошлого выделенного элемента
  hovered.unsetProperties('isHovered');
  hovered.addTo(this.selectedObjectCollection);

  if(active.getLength()) {
    active.setProperties('isHovered', true);
    active.addTo(this.hoveredObjectCollection);
  }
}

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

Задача решена, но если у кого-нибудь есть мысли по еще более элегантному решению задачи, буду благодарен за ответы.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.