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之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波