arcgis for js 地图文字标注加背景颜色

addBackgroundTextSymbol = function (infoTem, lng, lat, x?: any, y?: any, fontsize?: any, radiu?: any) {

 

var selfCom = this;

selfCom.dj.dojoRequire(["esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/Font",

"esri/symbols/TextSymbol", "esri/geometry/Point", "esri/graphic", "dojo/_base/Color", "dojo/dom", "dojo/on", "bgText/bgTextGraphic",

"bgText/bgTextGraphicLayer", "dojo/domReady!"

], function (

SimpleLineSymbol, SimpleMarkerSymbol, PictureMarkerSymbol,

SimpleFillSymbol, Font, TextSymbol, Point, Graphic,

Color, dom, on, bgTextGraphic, bgTextGraphicLayer

) {

 

var _fontsize = fontsize || 10;

var _radius = radiu || 6

var _infoTem = infoTem + "";

var infoLayer = selfCom.currMap.getLayer("infoLayer");

 

var point = Point(lng, lat);

var bglineSymbol = new SimpleLineSymbol("solid", new Color("gray"), 1);

var width = (selfCom.chkstrlen(_infoTem)) * 0.5 * (_fontsize + 3) + 4; //

var height = _fontsize * 1.8;

//背景框圆角半径

var radius = _radius;

 

//设置背景框的大小

var path = "M0" + " " + radius + "L0" + " " + (height - radius) + "Q0" + " " + height + " " + radius + " " + height + "L" + (width - radius) + " " + height + "Q" + width + " " + height + " " + width + " " + (height - radius) + "L" + width + " " + radius + "Q" + width + " " + "0" + " " + (width - radius) + " " + "0L" + radius + " " + "0Q0" + " " + "0" + " " + "0" + " " + radius;

 

var bgSymbol = new SimpleMarkerSymbol();

bgSymbol.setPath(path);

bgSymbol.setColor(new Color("gray"));

bgSymbol.setOutline(bglineSymbol);

var size = Math.max(height, width);

bgSymbol.setSize(size);

var bgGraphic = new Graphic(point, bgSymbol);

bgSymbol.xoffset = x || 30;

bgSymbol.yoffset = y || 24;

infoLayer.add(bgGraphic);

 

var sfs = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SHORTDASHDOT),

new Color([0, 0, 255, 0.5]));

var font = new Font(fontsize + "px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_LIGHTER);

 

var ts = new TextSymbol(_infoTem, font, new Color([255, 255, 255]));

 

ts.setAlign(Font.ALIGN_START);

 

ts.xoffset = x || 30;

ts.yoffset = y || 20;

 

var textGraphic = new bgTextGraphic(point, ts, sfs);

 

infoLayer.add(textGraphic);

 

// selfCom.currMap.centerAndZoom(point, 16);

 

});

 

}

 

//获取包含汉字字符串长度

chkstrlen = function (str) {

var strlen = 0;

for (var i = 0; i < str.length; i++) {

if (str.charCodeAt(i) > 255) //如果是汉字，则字符串长度加2

strlen += 2;

else

strlen++;

}

return strlen;

}

效果图如下：

 

 

 

需要用的文件  见：https://download.csdn.net/download/u013236043/10813574