リーフレットでマーカーを回転

Question

リーフレットでマーカーを回転させるにはどうすればよいですか？私はすべて回転角のある多くのマーカーを持っています。

私はLeaflet on GitHubでrunanet/coomsieからこのソリューションを試してみたが、何も私のマーカーで起こりません：

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は、例えばの価値を持っている「翻訳（956px、111px）」になる必要があります。コードが今のところ、それは単純に "rotate（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）;開始時。

Answer 2

私にとって非常にうまくいくのは、各マーカーにdata-rotate = "[angle]"属性を追加することです。

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

作品は非常に速く、マーカーの数百/数千人に：これはあなたが必要な各リフレッシュに、次のjQueryのステートメントを呼び出すことができます。インターネット上のどこか他のポストでこのメソッドを見つけましたが、ここでも共有することは正しいようです。

Answer 3

このソリューションは、これまでで最も簡単です：https://github.com/bbecquet/Leaflet.RotatedMarker

注：それは唯一の2つのオプション（回転角度とrotationOriginを）できるように、既存のマーカーを変更します。

このソリューションは非常にうまく機能します。 GitHubページごとに、使用例：

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