arcgis api 3.x for js 解决 textSymbol 文本换行显示(附源码下载)
2023-09-11 14:19:51 时间
前言
关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。
内容概览
- arcgis api 3.x for js 解决 textSymbol 文本换行显示
- 源代码 demo 下载
arcgis api 3.x for js 默认加载 textsymbol 显示文本是不支持换行的,识别不到 \n \r 等等转义符,需要拓展一下才能支持,下面是拓展后的效果图如下:
实现思路
本篇实现文本换行显示效果 demo 是在arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)基础上弄的
- 拓展支持换行的 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; } } });
- map.html引用 esri.symbol.MultiLineTextSymbol.js
<script type="text/javascript" src="js/main/esri.symbol.MultiLineTextSymbol.js"></script>
- map.js 加载显示核心代码:
//定义文本图层 textGraphicsLayer = new esri.layers.GraphicsLayer();//标注文本图层 map.addLayer(textGraphicsLayer);//地图添加图层
//创建textsymbol文本标注 if (data.features.length > 0) {//动态读取json数据源结果集 for (var i = 0; i < data.features.length; i++) { var feature = data.features[i]; var point = new esri.geometry.Point(feature.geometry.x, feature.geometry.y, map.spatialReference); //定义文本symbol textsymbol = new esri.symbol.TextSymbol(feature.attributes.NAME + "\n" + feature.attributes.PHONE).//动态设置文本值 setColor(new dojo.Color([128, 0, 0])).//setColor设置文本颜色 setFont(new esri.symbol.Font("10pt").//setFont设置文本大小 setWeight(esri.symbol.Font.WEIGHT_BOLD)). //setWeight设置文本粗体 setOffset(0, -35);//设置偏移方向 var graphic = new esri.Graphic(point, textsymbol); textGraphicsLayer.add(graphic); } }
//创建textsymbol文本标注 if (data.features.length > 0) {//动态读取json数据源结果集 for (var i = 0; i < data.features.length; i++) { var feature = data.features[i]; var point = new esri.geometry.Point(feature.geometry.x, feature.geometry.y, map.spatialReference); //定义文本symbol textsymbol = new esri.symbol.TextSymbol(feature.attributes.NAME + "\n" + feature.attributes.ADDRESS).//动态设置文本值 setColor(new dojo.Color([128, 0, 0])).//setColor设置文本颜色 setFont(new esri.symbol.Font("10pt").//setFont设置文本大小 setWeight(esri.symbol.Font.WEIGHT_BOLD)). //setWeight设置文本粗体 setOffset(0, -35);//设置偏移方向 var graphic = new esri.Graphic(point, textsymbol); textGraphicsLayer.add(graphic); } }
完整demo源码见小专栏文章尾部:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
相关文章
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(JQuery.js)高德地图api
- JS框架_(Esign.js)仿信用卡电子签名特效
- JS框架_(JQuery.js)图片相册掀开切换效果
- 当当网上书店购物车——JS源码
- 购物车的功能——JS源码
- A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)
- JS魔法堂:阻止元素被选中
- JS魔法堂:LINK元素深入详解
- js 的 ArrayBuffer 和 dataView
- [Node.js] Mock an API for Local Development in React with Mirage JS
- node.js常见的一些错误信息
- [Node.js] Stream all things!
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动,已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- Atitit 电子商务订单号码算法(java c# php js 微信
- 华为OD机试 - 猜字谜(Java & JS & Python)
- 华为OD机试 - 表达式括号匹配(Java & JS & Python)
- js文字闪烁
- 【nodejs原理&源码赏析(4)】深度剖析cluster模块源码与node.js多线程(上)
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- Node.js:使用nrm来管理npm源
- JS:使用Mock.js生成随机数据,拦截 Ajax 请求
- JS:crypto-js实现AES加密解密
- js-jquery-SweetAlert【二】配置方法
- js给div设置随机色demo示例
- js进度条载入demo效果示例(整理)