在Leaflet中旋转标记

Question

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

我试图从该解决方案runanet/coomsie在单张GitHub上,但没有与我的标记发生的情况:

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进行测试.)

Answer 1

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

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将不知道在哪里放置图标.

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

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

但是,它会在下一次旋转时中断,所以你真的需要一次性设置平移和旋转,如下所示:

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

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

Answer 2

这个解决方案是迄今为止最简单的：https : //github.com/bbecquet/Leaflet.RotatedMarker

注意：它只修改现有标记，允许另外两个选项（rotationAngle 和 rotationOrigin）。

该解决方案效果很好。根据 GitHub 页面，使用示例：

L.marker([48.8631169, 2.3708919], {
    rotationAngle: 45
}).addTo(map);