Повернуть маркер в листе

Как я могу повернуть маркер в листовке? У меня будет много маркеров, все с углом поворота.

Я пробовал это решение из 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);

Любые другие идеи или решения? (Тестирование с помощью Firefox 16 на Windows.)

Ответ 1

Запустив код как есть, значок исчезнет, когда вы попытаетесь повернуть его в Firefox (попробуйте повернуть на мускулике, а не на загрузку, и вы увидите, что значок появляется, прежде чем пытаться его повернуть), но я "Желаю сделать ставку, это будет работать (в первый раз) в браузере веб-браузера. Причиной являются линии преобразования:

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

Firefox также использует преобразования CSS для позиционирования значков, поэтому перед ротацией он будет иметь значение Mozartsform, например, "translate (956px, 111px)". Теперь, как это делает код, он заменит это просто "вращением (90deg)", и 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); в начале.

Ответ 2

Что для меня очень хорошо работает, это добавить атрибут data-rotate = "[angle]" для каждого маркера. Это позволяет вам при необходимости вызывать следующий оператор JQuery при каждом обновлении:

    $('.your-marker-class').each(function () {            
        var deg = $(this).data('rotate') || 0;
        var rotate = 'rotate(' + $(this).data('rotate') + 'deg) scale(0.5,0.5)';
        $(this).css({
            '-webkit-transform': rotate,
            '-moz-transform': rotate,
            '-o-transform': rotate,
            '-ms-transform': rotate,
            'transform': rotate
        });
    });

Работает очень быстро и с сотнями/тысячами маркеров. Нашел этот метод в каком-то другом месте где-то в интернетах, но, похоже, тоже имел право делиться здесь.

Ответ 3

Это решение на сегодняшний день является самым простым: https://github.com/bbecquet/Leaflet.RotatedMarker

Примечание: он только модифицирует существующий маркер, позволяя еще два параметра (rotationAngle и rotationOrigin).

Решение работает очень хорошо. Согласно странице GitHub, пример использования:

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