首先，下载这段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. 在C#中使用类golang信道编程（一）

    BusterWood.Channels是一个在C#上实现的信道的开源库.通过使用这个类库,我们可以在C#语言中实现类似golang和goroutine的信道编程方式.在这里我们介绍3个简单的信道的例子 ...

  2. hdu1054最小顶点覆盖

    最小定点覆盖是指这样一种情况: 图G的顶点覆盖是一个顶点集合V,使得G中的每一条边都接触V中的至少一个顶点.我们称集合V覆盖了G的边.最小顶点覆盖是用最少的顶点来覆盖所有的边.顶点覆盖数是最小顶点覆盖 ...

  3. 腾讯QQAndroid API调用实例（QQ分享无需登录）

    腾讯QQAndroid API调用实例(QQ分享无需登录)   主要分为两个步骤: 配置Androidmanifest.xml 修改activity里边代码 具体修改如下:   1.Activity代 ...

  4. Lua调试：getinfo详解

    getinfo是调试Lua程序时一个很重要很常见的函数,主要用于获取函数调用的基本信息.这个函数的难点在于各个参数的含义.下面一一介绍. 一.函数简介: 1.原型:getinfo(level, arg ...

  5. javascript 中 with 的使用

    1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式  with(object ...

  6. routeProvider路由的使用

    先创建一个主程序文件index.html,内容如下: <!DOCTYPE html> <html ng-app="myApp"> <head> ...

  7. Visual Studio Package 插件开发之自动生成实体工具

    前言 这一篇是VS插件基于Visual Studio SDK扩展开发的,可能有些朋友看到[生成实体]心里可能会暗想,T4模板都可以做了.动软不是已经做了么.不就是读库保存文件到指定路径么…… 我希望做 ...

  8. Hibernate composite key

    有两种方法来map composite key. 第一种用@IdClass第二种用@Embeddable,参考链接: http://stackoverflow.com/questions/358503 ...

  9. webpack使用

    Webpack是一个现代js应用的模块打包机.如果一个文件依赖另一个文件,webpack认为这就存在一个依赖关系.不管另一个文件是什么内容,image,css或js都被当作一个模块.Webpack从e ...

  10. 关于List<T> 的排序

    /** * @author hjn * @entity Student * @date 2017年5月23日15:22:18 */ public class Student { private Str ...