在Leaflet中旋转标记 [英] Rotate marker in Leaflet

问题描述

如何在传单中旋转标记？我会有很多标记，都有旋转角度。

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

我在 runanet / coomsie 的解决方案=https://github.com/CloudMade/Leaflet/issues/386> GitHub上的宣传单，但我的记号没有任何反应：

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）。代码现在的方式，它将用简单的旋转（90度）取代它，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.

这篇关于在Leaflet中旋转标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！