Lealfetマーカーを回転させるツールチップのテキスト

Question

マップ上に表示する必要のあるデータがあるJSONがあります。

var shapesCoordinates = '[{"shapeId": 1,"coordinates": [-1500,500],"text": "bla bla", "rotation": 20},{"shapeId": 2,"coordinates": [-1800,800],"text": "idemooooo", "rotation": 60}]'; 
var shapess = JSON.parse(shapesCoordinates); 

var markers = []; 
for (var i = 0; i < shapess.length; i++) { 
    var marker = L.marker(shapess[i]['coordinates'], { 
     opacity: 0.01 
    }).bindTooltip(shapess[i]['text'], 
     { 
      permanent: true, 
      className: "shapesText", 
      offset: [0, 0], 
      direction: "center" 
     } 
    ).openTooltip().addTo(mymap); 

    markers[shapess[i]['shapeId']] = marker; 
} 

CSSでテキストを回転しようとしましたが、問題があります。

 .leaflet-tooltip { 
      box-shadow: none; 
      /** 
       This rotates text but break marker position 
       set all markers on same (default) position 
      */ 
      transform: rotate(45deg) !important; 
     } 

    .shapesText { 
     position: absolute; 
     /** 
      This has no impact on text 
     */ 
     transform: rotate(45deg) !important; 
     font-size:14px; 
     background: none; 
     border: none 
    } 

この問題が発生する理由を理解します。

生成されたHTMLコードは、transform: translate3d()を持っていると私はを使用するときに変換：（） `それは要素の再配置を無効に回転させます。両方のプロパティ値を一緒に使用するにはどうすればよいですか？言い換えれば、translate3dをオーバーライドしないでローテーションを追加するにはどうすればいいですか？

必要に応じて、各マーカーに異なる回転を設定するリーフレットの方法がありますか？

私はリーフレットを使用してカスタムの非地理的地図を表示しています。一部の図形の枠線に沿ったテキストを表示する必要があります。

これは私が現在のツールチップの内容でゲームをプレイするために必要な生成されたHTMLコード

<div class="leaflet-tooltip shapesText leaflet-zoom-animated leaflet-tooltip-center" style="opacity: 0.9; transform: translate3d(385px, -32px, 0px);">bla bla</div> 

Answer 1

です。

var shapess = JSON.parse(shapesCoordinates); 

var markers = []; 
for (var i = 0; i < shapess.length; i++) { 
    var marker = L.marker(shapess[i]['coordinates'], { 
     opacity: 0.01 
    }).bindTooltip(shapess[i]['text'], 
     { 
      permanent: true, 
      className: "shapesText" + i, 
      offset: [0, 0], 
      direction: "center" 
     } 
    ).openTooltip().addTo(mymap); 

Iは、マーカーツールチップにアクセスし、translate3d現在の値と古いtransform財産を交換し、ダミーrotate値を追加するために、そのHTMLコードを変更する必要がありました。 追加された回転が機能しないという理由で、ダミー。新しいコンテンツは、私がツールチップのクラスにアクセスするだけrotate値を追加することにより、transformプロパティを変更することができますツールチップに追加された後に

if (shapess[i]["rotation"]) { 
     var content = marker['_tooltip']['_container']; 
     var style = $(content).attr('style'); 
     var transformProperty = style.substring(style.indexOf('transform')); 
     var transformRotationProperty = transformProperty.replace(';', ' rotation(' + shapess[i]["rotation"] + 'deg);'); 
     var changedContent = content.outerHTML.replace(transformProperty, transformRotationProperty); 

     marker['_tooltip'].setContent(changedContent); 
     $('.shapesText' + i).css({'transform': 'rotate(' + shapess[i]["rotation"] + 'deg)'}); 
    } 
    markers[shapess[i]['shapeId']] = marker; 

} 

。 古い値を維持しますtranslate値は無効になりません。

私はそれはバグか何か問題になる可能性があるかどうかわからないが、私が追加した場合のみ、rotatetranslate3dのない古い値が上書きされます。私たちは、ツールチップのいずれかのHTMLを見ることができます

しかし、古いtransform場合はCSSのみ回転して変換を用いtranslate3dとrotate の両方を持っているが、古いtranslate3d