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
         }; 
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值