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() ，当我使用 transform：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;

}

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

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

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

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

1 个答案: