arcgis js api改进textSymbol不能显示多行的不足

问题描述如题。
查阅相关资料后,发现都是同一篇文档。这种方案采用的是amd的模式,并不适合本人的应用环境,于是对textSymbol进行了继承,实现了多行标记类MultiLineTextSymbol.js。附上代码:

dojo.provide("extras.MultiLineTextSymbol");
dojo.require("esri.layers.LabelLayer");
dojo.require("dojox.gfx.svg");
dojo.require("esri.symbols.TextSymbol");
dojo.declare("extras.MultiLineTextSymbol",esri.symbols.TextSymbol, {
  constructor: function(options) {
    if( typeof esri.layers.LabelLayer.prototype._addLabel == 'function' )
    {
        esri.layers.LabelLayer.prototype._addLabel2 = esri.layers.LabelLayer.prototype._addLabel;
        esri.layers.LabelLayer.prototype._addLabel = function(a,b,c,e,g,k,m)
        {
            // replace \n by <br>
            a = a.replace(/\n/g, "<br />");
            this._addLabel2(a,b,c,e,g,k,m);
        }
    }

    if( typeof dojox.gfx.svg.Text.prototype.setShape == 'function' )
    {
        dojox.gfx.svg.Text.prototype.setShape = function(p)
        {
            this.shape = dojox.gfx.makeParameters(this.shape, p);
            this.bbox = null;
            var r = this.rawNode, s = this.shape;
            r.setAttribute("x", s.x);
            r.setAttribute("y", s.y);
            r.setAttribute("text-anchor", s.align);
            r.setAttribute("text-decoration", s.decoration);
            r.setAttribute("rotate", s.rotated ? 90 : 0);
            r.setAttribute("kerning", s.kerning ? "auto" : 0);
            r.setAttribute("text-rendering", "optimizeLegibility");

            while(r.firstChild)
                r.removeChild(r.firstChild);
            s.text+="";//保证text为数字时不报错
            if(s.text)
            { 
                var texts = s.text.replace(/<br\s*\/?>/ig, "\n").split("\n");
                var lineHeight = 1.1 * parseInt(document.defaultView.getComputedStyle(r, "").getPropertyValue("font-size"), 10); 
                if( isNaN(lineHeight) || !isFinite(lineHeight) )
                    lineHeight = 15;

                for(var i = 0, n = texts.length; i < n; i++)
                { 
                    var tspan = (document.createElementNS ? document.createElementNS(dojox.gfx.svg.xmlns.svg, "tspan") : document.createElement("tspan"));
                    tspan.setAttribute("dy", i ? lineHeight : -(texts.length-1)*lineHeight/2); 
                    tspan.setAttribute("x", s.x);
                    tspan.appendChild((dojox.gfx.useSvgWeb ? document.createTextNode(texts[i], true) : document.createTextNode(texts[i]))); 
                    r.appendChild(tspan);
                }
            }

            return this;
        }
    }
  }

});

调用时,引入文件MultiLineTextSymbol.js

dojo.require("MultiLineTextSymbol");

调用方式与textSymbol一致,text内容换行处使用\n

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值