解决arcgis javascript textsymbol不支持多行文本标注的问题
首先，下载这段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不支持多行文本标注的问题的更多相关文章
- 解决 arcGis android TextSymbol乱码的问题
不论是Arcgis for Android的哪个版本,都没无法解决中文乱码的问题,这个与Android中自带的字体库有关,可以参考这篇文章. 所以,要在Arcgis for Android中显示中文, ...
- ArcGIS API for javascript开发笔记（二）——解决ArcGIS Service中的服务在内网环境下无法进行javascript预览问题
感谢一路走来默默支持和陪伴的你~~~ ----------------------------拒绝转载-------------------------------- 1.问题说明 在使用ArcGIS ...
- Arcgis Javascript API 开发笔记
JS API3.4的要求 à(1) IE9或以上版本 否则dijit1.8.3不匹配 1.如何发布ArcgisJavascript API应用 0.准备工作: (1).有web应用: (2).有js ...
- 解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...
- FK JavaScript:ArcGIS JavaScript类库加载不成功而导致的程序异常
现象:页面加载时,有时候成功,有时候出错,出错的地方为init.js 加载esri的类库 经过仔细对比,发现出错时dojo加载的类库中,对象的很多属性都为undefined,而加载成功时,该对象的相关 ...
- FK JavaScript之:ArcGIS JavaScript添加Graphic,地图界面却不显示
使用ArcGIS JavaScript,往地图中添加几个Graphic,基本是与官网示例代码一致.绘制的图形一闪而过之后,就没了 核心代码如下: iniToolBar: function () { t ...
- 诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer
对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言. 最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些G ...
- 理解ArcGIS Javascript Viewer Widget及编程模型
一个ArcGIS Javascript Viewer for JavaScript Widget是一组可以共享.迁移及部署到JavaScript View程序中的的文本文件.通常,一个程序员如果要开发 ...
- Ionic集成ArcGIS JavaScript API.md
1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...
随机推荐
- nginx与apache配合反向代理技术1
序:最近在看Dimitri Aivaliotis的<Mastering Nginx>,刚好跆拳道课下班在路上看了反向代理服务器,准备在自己的博客VPS尝试一下 web代理服务器可以实现分布 ...
- 使用vs code实现git同步
用了git最方便的就是项目同步管理,回到家打开vscode只需要点击一下pull就能全部同步过来.是不是很方便....毕竟之前我都是拿u盘拷贝回家或者存到云盘再下载下来.. 我这里用的是国内的码云 ...
- SCP“免密” 远程COPY较多文件
一.linux脚本实现自动输入密码 使用Linux的程序员对输入密码这个举动一定不陌生,在Linux下对用户有严格的权限限制,干很多事情越过了权限就得输入密码,比如使用超级用户执行命令,又比如ftp. ...
- IOS开发常见错误
. 问题表现:什么情况?方法居然无法拉线? 问题简述:ios的空间拉线到一个.h .m文件中 居然多次拖动无效.. 问题解决:ios的空间响应单单在代码中创建一个方法是没用的,这个时候通常跟空间是没有 ...
- 欲练JS，必先攻CSS——前端修行之路（码易直播）
以下是直播大概内容的文字版: 感谢大家今天来到直播间收听本期的码易直播.今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助. 个人的css历史: ...
- [笔记]机器学习(Machine Learning) - 02.逻辑回归(Logistic Regression)
逻辑回归算法是分类算法,虽然这个算法的名字中出现了"回归",但逻辑回归算法实际上是一种分类算法,我们将它作为分类算法使用.. 分类问题:对于每个样本,判断它属于N个类中的那个类或哪 ...
- 增强for循环 -- foreach循环
1 作用 简化迭代器的书写格式.(注意:foreach循环的底层还是使用了迭代器遍历.) 2 适用范围 如果是实现了Iterable接口的对象或者是数组对象都可以使用foreach循环. 3 格 ...
- Java学习笔记——设计模式之三.装饰模式
函数应该做一件事,做好这件事,只做这一件事. --Clean Code 装饰模式,上代码: 先定义零件类: package cn.no3.decorator.template; public abst ...
- Kafka学习-Producer和Customer
在上一篇kafka入门的基础之上,本篇主要介绍Kafka的生产者和消费者. Kafka 生产者 kafka Producer发布消息记录到Kakfa集群.生产者是线程安全的,可以在多个线程之间共享生产 ...
- TCP协议详解---上
TCP头格式 注意以下几点: TCP的包是没有IP地址的,那是IP层上的事.但是有源端口和目标端口. 一个TCP连接需要四个元组来表示是同一个连接(src_ip, src_port, dst_ip, ...