首先，下载这段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来换行了

<!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>

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

  1. 解决 arcGis android TextSymbol乱码的问题

    不论是Arcgis for Android的哪个版本,都没无法解决中文乱码的问题,这个与Android中自带的字体库有关,可以参考这篇文章. 所以,要在Arcgis for Android中显示中文, ...

  2. ArcGIS API for javascript开发笔记（二）——解决ArcGIS Service中的服务在内网环境下无法进行javascript预览问题

    感谢一路走来默默支持和陪伴的你~~~ ----------------------------拒绝转载-------------------------------- 1.问题说明 在使用ArcGIS ...

  3. Arcgis Javascript API 开发笔记

    JS API3.4的要求 à(1)  IE9或以上版本 否则dijit1.8.3不匹配 1.如何发布ArcgisJavascript API应用 0.准备工作: (1).有web应用: (2).有js ...

  4. 解决IE6/IE7/IE8不支持before,after问题

    对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...

  5. FK JavaScript:ArcGIS JavaScript类库加载不成功而导致的程序异常

    现象:页面加载时,有时候成功,有时候出错,出错的地方为init.js 加载esri的类库 经过仔细对比,发现出错时dojo加载的类库中,对象的很多属性都为undefined,而加载成功时,该对象的相关 ...

  6. FK JavaScript之:ArcGIS JavaScript添加Graphic,地图界面却不显示

    使用ArcGIS JavaScript,往地图中添加几个Graphic,基本是与官网示例代码一致.绘制的图形一闪而过之后,就没了 核心代码如下: iniToolBar: function () { t ...

  7. 诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer

    对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言. 最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些G ...

  8. 理解ArcGIS Javascript Viewer Widget及编程模型

    一个ArcGIS Javascript Viewer for JavaScript Widget是一组可以共享.迁移及部署到JavaScript View程序中的的文本文件.通常,一个程序员如果要开发 ...

  9. Ionic集成ArcGIS JavaScript API.md

    1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...

随机推荐

  1. 封装类(Merry May Day to all you who are burried in work ~)---2017-05-01

    1.为什么要使用封装类? (1) 可以多个地方调用,避免代码的冗余 (2)面向对象三大特点之一,安全性高 2.代码及注意点? <?php class DB //文件名为:DB.class.php ...

  2. VMWare下ubuntu无法全屏的问题解决

    遇到的情况: 在VMWare中,安装ubuntu 最新版操作系统(16.04).运行该系统,发现ubuntu系统在虚拟机中,只能居中显示,全屏也只能占一半显示屏幕.怎么看,怎么不舒服. 分析问题: 一 ...

  3. 【算法系列学习】Dijkstra求最短路 [kuangbin带你飞]专题四 最短路练习 D - Silver Cow Party

    https://vjudge.net/contest/66569#problem/D trick:1~N各点到X可以通过转置变为X到1~N各点 #include<iostream> #in ...

  4. openwrt通过libcurl上传图片，服务器端通过PHP接收文件

    一.客户端文件上传 libcurl上传文件有两种方式: 1.直接上传文件,类似form表单<input type=”file” />,<form enctype=”multipart ...

  5. crontab定时任务不执行的原因

    1.重启crontab若是遇见"You (cloudlogin) are not allowed to use this program (crontab)                 ...

  6. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

  7. 【源码学习】之requirejs

    对于现在的前端生态来说,requirejs是有点过时了,webpack帮我们包干了一切.但是对于学习源码这件事情来说,永远是不过时的! 最近稍微闲下来了一点,就着以前做过的项目,我也来看看requir ...

  8. MFC教程

    MFC教程 还有VS2015的视频教程 试看教程地址:http://dwz.cn/4PcfPk免费下载地址:http://dwz.cn/mfc888 一.VS2010/MFC编程入门教程之目录 第一部 ...

  9. MySQL使用pt-online-change-schema工具在线修改1.6亿级数据表结构

    摘  要:本文阐述了MySQL DDL 的问题现状.pt-online-schema-change的工作原理,并实际利用pt-online-schema-change工具在线修改生产环境下1.6亿级数 ...

  10. PipedInputStream和PipedOutputStream详解

    PipedInputStream类与PipedOutputStream类用于在应用程序中创建管道通信.一个PipedInputStream实例对象必须和一个PipedOutputStream实例对象进 ...