一直沒有關注textsymbol標注的換行問題，今天群里一個人提出了這個問題，於是查了下文檔測試了下 "\n"、"\r"、<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 \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; } } });
然后在html中這樣引用，就可以使用\n來換行了
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 \n Text"), {})); 34 }); 35 }); 36 </script> 37 </head> 38 <body> 39 <div id="map"></div> 40 </body> 41 </html>