Листовка нестандартный значок маркера повернуть на угол, конфликт стиля преобразования - PullRequest
Новая
       14

Листовка нестандартный значок маркера повернуть на угол, конфликт стиля преобразования

0 голосов
/ 19 января 2019

Я воспроизвел эту проблему со следующей демонстрацией: http://jsfiddle.net/baoqger/deL0yuvg/9/

В моем проекте у меня есть собственный значок маркера, который я хочу повернуть значок в некоторых случаях.

Я добавляю имя пользователя при создании иконки: 

const uturnIcon = L.icon({
  iconUrl: 'http://joshuafrazier.info/images/firefox.svg',
  iconSize: [30, 30],
  className: 'u-turn-icon'
})

и добавить стиль CSS для класса следующим образом: 

.u-turn-icon {
  transform: rotate(20deg) !important
}

Проблема по умолчанию, значок img имеет атрибут стиля transform: translate3d, поэтому существует конфликт между преобразованием по умолчанию и моим добавленным стилем преобразования. И стиль преобразования по умолчанию создается самой листовкой, когда мы увеличиваем карту, значение этого атрибута также обновляется.

Так как решить эту проблему?

1 Ответ

0 голосов
/ 20 января 2019

Первая проблема с вашим кодом заключается в том, что он поворачивает значок вокруг своего угла, а не по центру, поэтому он оказывается не в том месте. Вторая проблема заключается в том, что Leaflet использует свойство иконки style.transform для ее позиционирования, поэтому поворот поворачивается при каждом увеличении карты.

Плагин Leaflet.RotatedMarker , предложенный @IvanSanchez, выглядит элегантным решением. Если вы не можете использовать плагин, вам может помочь следующее:

Стиль CSS: 

.u-turn-icon {
   transform-origin: center;
}

Javascript: 

map.on("zoomstart", function(ev) {
  let icons = document.getElementsByClassName("u-turn-icon");
  for(let icon of icons) {
    icon.style.visibility = "hidden";
  }
});

map.on("zoomend", function(ev){
  let icons = document.getElementsByClassName("u-turn-icon");
  for(let icon of icons) {
    icon.style.transform += " rotate(20deg)";
    icon.style.visibility = "";
  }
});

map.fire("zoomend");

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

...