OpenLayers 2.13中旋转文字标注


在OpenLayers 2系列的源码中,文字标注是不能选择的,永远平行于屏幕,那是不是没有办法了。其实很简单,在源码中加几句旋转的代码即可,如下:

在Openlayers.js中搜索:drawText: function(featureId, style, location) 函数
然后找到下面的位置,添加加粗的部分。

 label.setAttributeNS(null, "x", x);
 label.setAttributeNS(null, "y", -y);

**if (style.angle || style.angle == 0) {
        var rotate = 'rotate(' + style.angle + ',' + x + "," + -y + ')';
        label.setAttributeNS(null, "transform", rotate);
         }**

if (style.fontColor) {
            label.setAttributeNS(null, "fill", style.fontColor);
        }

在前端调用的时候,OpenLayers.Feature.Vector.style可加上angle属性,angle为角度非弧度。

例如

 var style = {
                 stroke: true,  
                 strokeColor:'#000000',
                 strokeWidth:5,
                 fill: true,
                 fillColor:'#DAA520',  
                 label:Laber,  
                 fontSize:'13px',  
                 fontFamily:'微软雅黑',  
                 labelXOffset:labelXOffset,  
                 labelYOffset:labelYOffset,  
                 fontColor:'#EE1289',
                 labelOutlineColor:'#ffffff',
                 labelOutlineWidth:2,
                 angle:45
         }; 

转载自:https://blog.csdn.net/qq_14980415/article/details/81292154

You may also like...