arcgis API for js之TextSymbol换行问题

arcgis API for javaScript 之TextSymbol换行问题

我来更新了，更新思路，想要显示textSymbol换行，其实主要也是为了显示属性，则可以用弹窗显示，使用InfoWindow、结合PopupTemplate或InfoTemplate 就可达到想要的效果啦，因为现在转战前端，所以这部分内容，可能后续会更新
1、textSymbol在API中 只能单行显示text
现在我们引入一个JS文件就可以解决换行问题。
首先引入文件：MultiLineTextSymbol.js（这里源自https://www.cnblogs.com/wandergis/p/4615802.html的博客）

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;
        }
    }
});

然后就可以写我们自己的textSymbol样式了，直接带进去就行了。
示例如下：

$("#TotalWater").click(function () {//这里是绑定一个单击事件
                LabelLayer.clear();
                PolygonLayer.clear();//首先清理图层，我这里分别为标签图层和多边形图层

                for (var k in DmaAttr) {

                    var attr = {};
                    var regionGeometry = MT_DMA_REGION[k];
                    var region = new Polygon(regionGeometry);
                    attr.Name = k;
                    attr.total = DmaAttr[k].total;
                    attr.domesticWater1 = DmaAttr[k].domesticWater1;
                    attr.domesticWater2 = DmaAttr[k].domesticWater2;
                    attr.nonDomesticWater1 = DmaAttr[k].nonDomesticWater1;
                    attr.nonDomesticWater2 = DmaAttr[k].nonDomesticWater2;
                    attr.particularWater1 = DmaAttr[k].particularWater1;
                    attr.particularWater2 = DmaAttr[k].particularWater2;
                    console.log(attr);//上面这一串是准备把属性装进graphic
                    
                    graphics = new Graphic(region, symbol, attr);
                    //这里的t是组织好字符串，等一下方便显示
                    var t = "分区:" + attr.Name +
                        "\n总户数:" + attr.total +
                        "\n生活用水1:" + attr.domesticWater1 +
                        "\n生活用水2:" + attr.domesticWater2 +
                        "\n非生活用水1:" + attr.nonDomesticWater1 +
                        "\n非生活用水2:" + attr.nonDomesticWater2 +
                        "\n特种用水1:" + attr.particularWater1 +
                        "\n特种用水2:" + attr.particularWater2;
                    console.log(t);
                    PolygonLayer.add(graphics);
                    //这里是我的textSymbol的样式
                    var textSymbol3 = new TextSymbol({
                        
                        "type": "esriTS",
                        "color": [255, 99, 71, 255],
                        "backgroundColor": [0, 0, 0, 0],
                        "borderLineSize": 2,
                        "borderLineColor": [255, 0, 255, 255],
                        "haloSize": 0.5,
                        //"haloColor": [220, 220, 220, 220],
                        "verticalAlignment": "bottom",
                        "horizontalAlignment": "left",
                        "rightToLeft": false,
                        "angle": 0,
                        "xoffset": 0,
                        "yoffset": 0,
                        "kerning": true,
                        "text":t,//直接传t
                        "font": {
                            "family": "Arial",
                            "size": 12,
                            "style": "normal",
                            "weight": "normal",
                            "decoration": "none"
                        }
                       
                    });

                    var labelGraphic = new Graphic(new Point(DmaPoint[k].x, DmaPoint[k].y, map.SpatialReference), textSymbol3);
                    //把point和symbol组成一个graphic添加到，临时的graphic图层（我这里只需要临时显示，所以我使用的都是graphiclayer
                    LabelLayer.add(labelGraphic);
                }
            });

得到的结果如下：

我现在做出来得只能是显示多行，但还不能给他添加背景和边框，希望有会的朋友可以教一下我