Leaflet自定义图标标记旋转角度，transform样式冲突。

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
}

默认情况下，图标图片具有样式属性transform:translate3d，因此默认转换和我添加的转换样式之间存在冲突。而Leaflet自身创建了默认的转换样式，当我们缩放地图时，此属性的值也会更新。
那么如何解决这个问题呢？

- Chris Bao

---

https://github.com/bbecquet/Leaflet.RotatedMarker - IvanSanchez

Answer 1

您的代码存在两个问题。首先，它将图标围绕其角旋转而不是中心，因此它会出现在错误的位置。第二个问题是，Leaflet使用图标的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");

这段代码的作用是在每次地图缩放时重置每个掉头标识的旋转。掉头标识在缩放开始时隐藏，在结束时显示，因此您不会注意到它在旋转。手动触发一个 zoomend 事件，在地图缩放之前将图标设置为正确的旋转角度。

- JRI

---

谢谢。这个插件很容易使用。而且你的第二个解决方案也很易于理解。 - Chris Bao