arcgis api 3.x for js 解决 textSymbol 文本换行显示（附源码下载）

前言

关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。

内容概览

1. arcgis api 3.x for js 解决 textSymbol 文本换行显示
2. 源代码 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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波