传单自定义图标标记旋转角度，转换样式冲突。

Question

我用下面的演示复制了这个问题：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，因此默认转换与我添加的转换样式之间存在冲突。默认的转换样式是由传单本身创建的，当我们缩放地图时，这个属性的值也会被更新。

那么如何解决这个问题呢？

Answer 1

代码的第一个问题是它将图标旋转到它的拐角处，而不是它的中心，所以它最终在错误的地方结束。第二个问题是传单使用图标的style.transform属性来定位它，所以每次地图缩放时，旋转都会被覆盖。

@IvanSanchez建议的Leaflet.RotatedMarker插件看起来是一个优雅的解决方案。如果您不能使用该插件，以下内容可能适用于您：

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");

此代码只需在每次缩放地图时重置每个u转图标的旋转。图标隐藏在缩放的开始，并显示在结束，所以你没有注意到它旋转。zoomend事件是手动触发的，以便在地图缩放之前将图标设置为正确的旋转。