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

解决arcgis javascript textsymbol不支持多行文本标注的问题
 发布于 1 个月前  作者 wandergis  135 次浏览  来自 技术
一直没有关注textsymbol标注的换行问题，今天群里一个人提出了这个问题，于是查了下文档测试了下 “\n”、"\r"、
都试过了，发现多个空格或者换行都只会保留一个空格，于是百度了一下 没找到解决方案，度娘不行，咱还有谷歌，终于找到了解决方案
首先，下载这段js文件，命名为esri.symbol.MultiLineTextSymbol.js
{ 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来换行了
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Simple Map</title> <link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } </style> <script src="https://js.arcgis.com/3.13/"></script> <script src="./esri.symbol.MultiLineTextSymbol.js"></script> <script> var map; 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"), {})); }); }); </script> </head> <body> <div id="map"></div> </body> </html>
View Code

 

posted @ 2022-07-13 10:35  devgis  阅读(172)  评论(0)  编辑  收藏  举报