首先，下载这段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. JavaScript高级程序设计 第三章 基本概念

    ch3 基本概念 标签(空格分隔): JavaScript 语法 标识符 - 第一个字符必须是字母.下划线或美元 - 驼峰大小写格式 严格模式 ECMAScript5引入,定义了一种解析和执行模型.此 ...

  2. Github－－账号重新申请与配置

    2017-04-24 最近洗心革面痛下决心要好好再深入学习一番前端,正好加入了一个外包团队接了份单子,外包项目正在如火如荼地进行着,自己也打算趁这个机会来好好学习总结一番. 但是俗话说得好," ...

  3. Quartz (一)

    1 核心接口 1.1 Scheduler---核心调度器 1.2 Job---任务 1.3 JobDetail---任务描述 1.4 Trigger---触发器 2 触发器 Tigger(CornTr ...

  4. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  5. ArcGIS 网络分析[1.5] 使用点线数据一起创建网络数据集（如何避免孤立点/点与线的连通性组合结果表）

    ArcGIS中最基本的三种矢量数据是什么?点线面. 网络中除了路网之外,还会有地物点. 如上图,我们在建立网络数据集的时候,作为实验,当然可以只是公路网.但是在大型的决策任务中,网络数据集就不只是公路 ...

  6. MySQL 闪回工具之 binlog2sql

    生产上误删数据.误改数据的现象也是时常发生的现象,作为 DBA 这时候就需要出来补锅了,最开始的做法是恢复备份,然后从中找到需要的数据再进行修复,但是这个时间太长了,对于大表少数数据的修复来讲,动作太 ...

  7. error C2039: 'SetDefaultDllDirectories'错误解决办法

    使用VS2013+WDK8.1+Win7开发UMDF驱动,当使用了CComPtr类,包含了atlcomcli.h头文件却报错,错误如下: Error 3 error C2039: 'SetDefaul ...

  8. 《安卓网络编程》之第一篇 java环境下模拟客户端、服务器端

    1.Socket简介 在网络上的两个程序通过一个双向的通信连接实现数据的交换,这个双向链路的一端称为一个Socket.Socket通常用来实现客户方和服务方的连接.Socket是TCP/IP协议的一个 ...

  9. set集合（一）

    set 叫做集合  作用:  去重(去除重复) 举例-- >>> name_list = ['alben','nichole','lucy','andy','tom','alben' ...

  10. R语言的高质量图形渲染库Cairo（转）

    前言 R语言不仅在统计分析,数据挖掘领域,计算能力强大.在数据可视化上,也不逊于昂贵的商业.当然,背后离不开各种开源软件包的支持,Cairo就是这样一个用于矢量图形处理的类库. Cairo可以创建高质 ...