前言
关于本篇功能实现用到的 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之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波