通过设置TextSymbol,设置文字标注,api参考:
https://developers.arcgis.com/javascript/3/jsapi/textsymbol-amd.html
代码示例:
/**
* 绘制点图层
* @param name 点位数组 array
* @param imgUrl 图标url地址 string
*/
function addGraphic(pointArr,imgUrl) {
pointGraphicLayer.clear();
pointTextLayer.clear();
for(var i=0;i < pointArr.length;i++){
//对坐标加偏移后叠加
var coorArr = coordtransform.wgs84togcj02(pointArr[i].x,pointArr[i].y);
var point = new esri.geometry.Point(coorArr);
// var point = new esri.geometry.Point([pointArr[i].x,pointArr[i].y]);
// var imgUrl = "img/defaultPoint.png";
var pictureMarkerSymbol = new esri.symbol.PictureMarkerSymbol(imgUrl, 32, 55);
pictureMarkerSymbol.setOffset(0, 27.5);
var graphic = new esri.Graphic(point, pictureMarkerSymbol);
var textsymbol = new esri.symbol.TextSymbol(pointArr[i].name);
textsymbol.setFont(new esri.symbol.Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD));
textsymbol.setOffset(32, 55);
textsymbol.setColor(new esri.Color([255,0,0,0.8]));
var graphicText = new esri.Graphic(point, textsymbol);
pointGraphicLayer.add(graphic);
pointTextLayer.add(graphicText);
}
}
效果截图:
image.png
更多参考:# 解决arcgis javascript textsymbol不支持多行文本标注的问题
另附openlayer文字标注http://anzhihun.coding.me/ol3-primer/ch07/07-03-07.html
网友评论