我通过以下演示重现了这个问题:http://jsfiddle.net/baoqger/deL0yuvg/9/ 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 的 style 属性为transform: translate3d
,所以默认的变换和我添加的变换样式之间存在冲突。默认的变换样式是由leaflet本身创建的,当我们缩放地图时,该属性的值也会更新。
那么如何解决这个问题呢?
您的代码的第一个问题是它围绕其角而不是中心旋转图标,因此它最终出现在错误的位置。第二个问题是Leaflet使用了图标style.transform
属性来定位它,因此每次地图缩放时旋转都会被覆盖。
The Leaflet.RotatedMarker https://github.com/bbecquet/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");
此代码只是在每次缩放地图时重置每个 U 型转弯图标的旋转。该图标在缩放开始时隐藏,并在结束时显示,因此您不会注意到它在旋转。 Azoomend
在地图缩放之前手动触发事件以将图标设置为正确的旋转。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)