ArcGIS API For JS 文本标注换行

require(["esri/layers/LabelLayer"], function(ll) { 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); } } }); require(["esri/symbols/TextSymbol", "dojox/gfx/svg"], function(ts, svg) { 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); 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; } } }); 

       ArcGIS API for JS本身不支持文本多行标注。将上面的代码复制到新建的JS文件中,并命名esri.symbol.MultiLineTextSymbol.js,引用该JS文件即可。 在生成文本标注时如果需要实现多行,只需通过字符串'\n'实现换行,实现多行文本标注的具体代码如下:

  require(["esri/map",
            "esri/symbols/TextSymbol",
            "esri/graphic",
            "esri/geometry/Point",
            "dojo/domReady!"], function (Map, TextSymbol, Graphic, Point) {
            map = newMap("map", {basemap: "topo", center: [0, 0], zoom: 4, sliderStyle: "small"});
            map.on("load", function () {
                map.graphics.add(newGraphic(newPoint(0, 0), newTextSymbol("Multi-Line \n Text"), {}));
            });
        });





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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值