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

Первая проблема с вашим кодом заключается в том, что он поворачивает значок вокруг своего угла, а не по центру, поэтому он оказывается не в том месте. Вторая проблема заключается в том, что 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 запускается вручную, чтобы установить правильное вращение значка до масштабирования карты.