Rotate marker in Leaflet

Question

Come posso ruotare un marker nel volantino? Avrò molti segnalini, tutti con un angolo di rotazione.

ho provato questa soluzione da runanet/coomsie a Leaflet on GitHub, ma non succede nulla con il mio marcatore:

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); 

Tutte le altre idee o soluzioni? (Test con Firefox 16 su Windows.)

Answer 1

Eseguendo il codice così com'è, l'icona scomparirà quando proverai a ruotarlo in Firefox (prova a ruotare su un mouseclick invece di caricare e vedrai che l'icona appare prima di provare a ruotarlo), ma sono disposto a scommettere che funzionerà (la prima volta) in un browser webkit. Il motivo è la linee trasformata:

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

Firefox utilizza anche i CSS si trasforma in icone di posizione, quindi prima di rotazione avrà Moztransform avrà un valore di, per esempio "tradurre (956px, 111px)". Il modo in cui il codice è ora, lo sostituirà semplicemente con "ruota (90 gradi)" e Firefox non saprà dove posizionare l'icona.

Si desidera che Moztransform abbia un valore di "translate (956px, 111px) rotate (90deg)", quindi se si utilizza questo codice funzionerà la prima volta, come nel webkit.

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

Tuttavia, si romperà sulla prossima rotazione, in modo da realmente bisogno di impostare sia la traslazione e rotazione in un colpo solo, in questo modo:

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

Poi si può sbarazzarsi della L .DomUtil.setPosition (this._icon, pos); all'inizio.

Answer 2

Ciò che funziona molto bene per me è l'aggiunta di un attributo data-rotate = "[angolo]" a ciascun marcatore. Questo consente di chiamare la seguente dichiarazione JQuery su ogni aggiornamento in caso di necessità:

$('.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 
     }); 
    }); 

funziona molto veloce e con centinaia/migliaia di marcatori. Ho trovato questo metodo in qualche altro post da qualche parte sugli internet ma mi sembrava giusto condividere anche qui.

Answer 3

Questa soluzione è di gran lunga il più facile: https://github.com/bbecquet/Leaflet.RotatedMarker

Nota: si modifica solo il marcatore esistente, sono altre due opzioni (RotationAngle e rotationOrigin).

La soluzione funziona molto bene. Come per la pagina GitHub, un esempio di utilizzo:

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