JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-6-23 16:11:05

一直没有关注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, true) : document.createTextNode(texts))); 
                    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>

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

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