首先，下载这段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. 解决 MySQL 分页数据错乱重复

    前言 一天,小明兴匆匆的在通讯工具上说:这边线上出现了个奇怪的问题,麻烦 DBA 大大鉴定下,执行语句 select xx from table_name wheere xxx order by 字段 ...

  2. Windows10 图标重建

    Windows10 图标重建 有没有遇到电脑上某个图标成了黑块,白块或者没有图呢. 那这样的话就可以使用图标重建啦. 删掉Windows10的图标文件如下图 路径: %userprofile%\App ...

  3. 使用JavaEE的ServerAuthModule模块和web.xml进行相应配置，实现对用户的权限控制

    ServerAuthModule这里不细说,可以自行百度. 重点在注释: <!-- 声明用于安全约束的角色 --> <security-role> <role-name& ...

  4. python基本运算

    环境:python3.x a,b = 60,164 一.算数运算符 操作符 描述 例子 + 加法 a+b = 224 - 减法 a-b = -104 * 乘法 a*b = 9840 / 除(保留小数位 ...

  5. luogu 1521-求逆序对

    题意: 逆序对指在一个序列中ai>aj && i < j,也就是一前一后两个数,当大的在前面的时候即算一对. 题目求在一个由1-n组成的序列中逆序对为k的序列的个数. 出题 ...

  6. Qt 之 入门例程(二)

    本文以 Qt 中的 QtConcurrent::run() 函数为例,介绍如何将函数运行在单独的某一个线程中. 1  QtConcurrent::run() QtConcurrent 是一个命名空间, ...

  7. hdu1541 Stars 树状数组

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1541 题目大意就是统计其左上位置的星星的个数 由于y已经按升序排列,因此只用按照x坐标生成一维树状数组 ...

  8. hdu4463 Outlets 最小生成树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4463 很裸的一道题目,稍微处理一下输入即可 代码: #include<iostream> ...

  9. PipedInputStream和PipedOutputStream详解

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

  10. Android studio 打开别人的工程

    Android Studio正确打开项目只需要两步,或者说找到两个文件进行简单的修改就好,最好在打开之前进行修改 (1)gradle-wrapper.properities,在项目下按照如下路径可以找 ...