旋转传单标记工具提示文本

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()，当我使用转换时：rotate()`它覆盖元素重新定位。如何同时使用两个属性值？换句话说，如何在不覆盖 translate3d

的情况下添加旋转

如果需要，是否有一些Leaflet的方法可以为每个标记设置不同的旋转？

我只是使用 Leaflet 来显示自定义的非地理地图，有时需要显示遵循某些形状边界的文本。

这是生成的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);

我需要访问标记工具提示并更改其 HTML 代码，以便将旧的 transform 属性替换为当前的 translate3d 值并添加虚拟 rotate 值。虚拟的原因是添加的旋转不起作用。

    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;

}

将新内容添加到工具提示后，我可以访问工具提示 class 并通过仅添加 更改 transform 属性 ]rotate值。它会保留旧的 translate 值而不覆盖。

我不确定这是一个错误还是什么问题，但是如果我只添加 rotate 而没有添加 translate3d 旧值将被覆盖。

但是，如果旧 transform 同时具有 translate3d 和 rotate 使用仅旋转的 CSS 变换不会覆盖旧的 translate3d

旋转传单标记工具提示文本

Rotate Leaflet markers tooltip text

javascript

css

rotation

leaflet