旋转传单标记工具提示文字 [英] Rotate Leaflet markers tooltip text

问题描述

我有一些带有应在地图上显示的数据的JSON.

I have some JSON with data that should be shown on the map.

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旋转文本，但是存在一些问题.

I tried to rotate text with CSS but there is some issue.

     .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
    }

我弄清楚了为什么会发生此问题.

I figure out why this issue happens.

生成的HTML代码具有 transform: translate3d() ，当我使用 transform:rotate()`时，它将覆盖元素的重新放置.如何同时使用两个属性值?换句话说，如何在不覆盖translate3d的情况下添加旋转效果

generated HTML code has transform: translate3d() and when I use transform: rotate()` it override element reposition. How can I use both property values together? In other words, how can I add rotation without overriding translate3d

如果需要，是否可以使用Leaflet的方法为每个标记设置不同的旋转度?

Is there is some Leaflet's way to set different rotation to each marker if it is needed?

我只是使用Leaflet来显示自定义的非地理地图，因此有时需要显示会跟随某些形状边界的文本.

I am just using Leaflet to show a custom non-geographic map and there is needs to show sometimes text which will follow some shapes borders.

这是生成的HTML代码

This is generated HTML code

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

推荐答案

我需要使用当前的工具提示内容来玩游戏.

I needed to play a game with current tooltip content.

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代码，以便用当前的 translate3d 值替换较旧的 transform 属性并添加虚拟 rotate 值. 假的原因是无法增加旋转.

I needed to access marker tooltip and change its HTML code in order to replace older transform property with current translate3d value and add dummy rotate value. Dummy in reason that added rotation does not work.

    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;

}

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

After new content is added to tooltip I can access tooltip class and change transform property by adding only rotate value. It will keep old translate value without overriding.

我不确定这是一个错误还是可能是一个问题，但是如果我仅添加 rotate 而没有 translate3d 的旧值将被覆盖

I am not sure if it is a bug or what can be a problem, but if I add only rotate without translate3d old value will be overridden.

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

But, if old transform has both translate3d and rotate using CSS transform with only rotate will not override old translate3d

这篇关于旋转传单标记工具提示文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！