arcgis js api 3.x 添文字带背景色

apgk1

已于 2024-04-26 15:31:05 修改

阅读量249

点赞数 6

分类专栏： arcgis 文章标签： javascript arcgis 前端经验分享

于 2024-04-22 14:19:23 首次发布

本文链接：https://blog.csdn.net/apgk1/article/details/138074652

版权

arcgis 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

要实现效果如下

背景长度根据文字长度来决定的

代码备份如下

addBackgroundTextSymbol('1234', point, 0, 25, 0, 20);

/* 
   infoTem 文字 
   point 点位
    x, y, x1, y1 偏移的数值
 **/
 function addBackgroundTextSymbol( infoTem, point, x, y, x1, y1) {
                    var _fontsize = 10;
                    var _radius = 3;
                    var _infoTem = infoTem;
                    var point = point;
                    var bglineSymbol = new SimpleLineSymbol("solid", new Color("gray"), 1);
                    var width = (chkstrlen(_infoTem)) * 0.5 * (_fontsize + 3) + 4; //
                    var height = _fontsize * 2;
                    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;
                    bgSymbol.yoffset = y;
                   
                        gismap.graphics.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 = x1;
                    ts.yoffset = y1;
                    var textGraphic = new Graphic(point, ts, sfs);
                   
                        gismap.graphics.add(textGraphic);
                   
                }
function chkstrlen(str) {
                    var strlen = 0;
                    for (var i = 0; i < str.length; i++) {
                        if (str.charCodeAt(i) > 255) //如果是汉字，则字符串长度加2
                            strlen += 2;
                        else
                            strlen++;
                    }
                    return strlen;

                }

完美展示