问题描述如题。
查阅相关资料后,发现都是同一篇文档。这种方案采用的是amd的模式,并不适合本人的应用环境,于是对textSymbol进行了继承,实现了多行标记类MultiLineTextSymbol.js。附上代码:
dojo.provide("extras.MultiLineTextSymbol");
dojo.require("esri.layers.LabelLayer");
dojo.require("dojox.gfx.svg");
dojo.require("esri.symbols.TextSymbol");
dojo.declare("extras.MultiLineTextSymbol",esri.symbols.TextSymbol, {
constructor: function(options) {
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);
}
}
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);
s.text+="";//保证text为数字时不报错
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;
}
}
}
});
调用时,引入文件MultiLineTextSymbol.js
dojo.require("MultiLineTextSymbol");
调用方式与textSymbol一致,text内容换行处使用\n