解决arcgis javascript textsymbol不支持多行文本标注的问题

一直没有关注textsymbol标注的换行问题，今天群里一个人提出了这个问题，于是查了下文档测试了下 " "、" "、<br/>都试过了，发现多个空格或者换行都只会保留一个空格，于是百度了一下没找到解决方案，度娘不行，咱还有谷歌，终于找到了解决方案

首先，下载这段js文件，命名为esri.symbol.MultiLineTextSymbol.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 
 by <br>
            a = a.replace(/
/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(/<brs*/?>/ig, "
").split("
");
                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;
        }
    }
});

然后在html中这样引用，就可以使用来换行了

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
 6     <title>Simple Map</title>
 7     <link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css">
 8     <style>
 9         html, body, #map {
10             height: 100%;
11             width: 100%;
12             margin: 0;
13             padding: 0;
14         }
15 
16         body {
17             background-color: #FFF;
18             overflow: hidden;
19             font-family: "Trebuchet MS";
20         }
21     </style>
22     <script src="https://js.arcgis.com/3.13/"></script>
23     <script src="./esri.symbol.MultiLineTextSymbol.js"></script>
24     <script>
25         var map;
26         require(["esri/map",
27             "esri/symbols/TextSymbol",
28             "esri/graphic",
29             "esri/geometry/Point",
30             "dojo/domReady!"], function (Map, TextSymbol, Graphic, Point) {
31             map = newMap("map", {basemap: "topo", center: [0, 0], zoom: 4, sliderStyle: "small"});
32             map.on("load", function () {
33                 map.graphics.add(newGraphic(newPoint(0, 0), newTextSymbol("Multi-Line 
 Text"), {}));
34             });
35         });
36     </script>
37 </head>
38 <body>
39 <div id="map"></div>
40 </body>
41 </html>