在传单中旋转标记

2022-01-12 00:00:00 rotation marker icons leaflet javascript

如何在传单中旋转标记?我会有很多标记，都有一个旋转角度.

How can I rotate a marker in leaflet? I will have a lot of markers, all with a rotation angle.

我在 Leaflet on GitHub 上尝试了 runanet/coomsie 的这个解决方案，但我的标记没有任何反应:

I've tried this solution from runanet/coomsie at Leaflet on GitHub, but nothing happens with my marker:

L.Marker.RotatedMarker= L.Marker.extend({    
    _reset: function() {
        var pos = this._map.latLngToLayerPoint(this._latlng).round();

        L.DomUtil.setPosition(this._icon, pos);
        if (this._shadow) {
            L.DomUtil.setPosition(this._shadow, pos);
        }

        if (this.options.iconAngle) {
            this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
            this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';
            this._icon.style.MsTransform = 'rotate(' + this.options.iconAngle + 'deg)';
            this._icon.style.OTransform = 'rotate(' + this.options.iconAngle + 'deg)';
        }

        this._icon.style.zIndex = pos.y;
    },

    setIconAngle: function (iconAngle) {

        if (this._map) {
            this._removeIcon();
        }

        this.options.iconAngle = iconAngle;

        if (this._map) {
            this._initIcon();
            this._reset();
        }
    }

});

var rotated = new L.Marker.RotatedMarker([63.42, 10.39]);
rotated.setIconAngle(90);
rotated.addTo(map);

还有其他想法或解决方案吗?(在 Windows 上使用 Firefox 16 进行测试.)

Any other ideas or solutions? (Testing with Firefox 16 on Windows.)

推荐答案

按原样运行代码，当你尝试在 Firefox 中旋转它时，图标会消失(尝试在鼠标单击而不是加载时旋转，你会看到该图标会在您尝试旋转它之前出现)，但我敢打赌它会(第一次)在 webkit 浏览器中工作.原因是变换线:

Running the code as it is, the icon will disappear when you try to rotate it in Firefox (try rotating on a mouseclick instead of on load and you will see that the icon appears before you try to rotate it), but I'm willing to bet it will work (the first time) in a webkit browser. The reason is the transform lines:

this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';

Firefox 还使用 CSS 变换来定位图标，因此在旋转之前 Moztransform 将具有例如translate(956px, 111px)"的值.按照现在的代码方式，它将用简单的rotate(90deg)"替换它，Firefox 将不知道将图标放在哪里.

Firefox also uses CSS transforms to position icons, so before rotation it will have Moztransform will have a value of for example "translate(956px, 111px)". The way the code is now, it will replace that with simply "rotate(90deg)" and Firefox won't know where to place the icon.

您希望 Moztransform 的值为translate(956px, 111px) rotate(90deg)"，因此如果您使用此代码，它会在第一次工作，就像在 webkit 中一样.

You want Moztransform to have a value of "translate(956px, 111px) rotate(90deg)", so if you use this code it will work the first time, like in webkit.

this._icon.style.MozTransform = this._icon.style.MozTransform  + ' rotate(' + this.options.iconAngle + 'deg)';

但是，它会在下一次旋转时中断，因此您确实需要一次性设置平移和旋转，如下所示:

However, it will break on the next rotate, so you really need to set both the translation and rotation in one go, like this:

this._icon.style.MozTransform = L.DomUtil.getTranslateString(pos) + ' rotate(' + this.options.iconAngle + 'deg)';

然后你可以摆脱 L.DomUtil.setPosition(this._icon, pos);一开始.

Then you can get rid of the L.DomUtil.setPosition(this._icon, pos); at the start.

相关文章