Leaflet自定义图标标记旋转一个角度，变换样式冲突

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'
})

并为 class 添加 css 样式，如下所示：

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

问题是默认情况下，icon img 的style 属性是transform: translate3d，所以默认的transform 和我添加的transform style 有冲突。并且默认的转换样式是由传单本身创建的，当我们缩放地图时，该属性的值也会更新。

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

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 事件以将图标设置为正确的旋转。

Leaflet自定义图标标记旋转一个角度，变换样式冲突

Leaflet custom icon marker rotate an angle, the transform style conflict

icons

transform

marker

leaflet