ArcGIS API for JavaScript 3.24 文字标注的添加和带背景的文字添加

说明：本人是一个gis小白，由于网上的资料过于专业，当时学习的时候经常看不懂，于是写了一些简单的关于ArcGIS Api for javaScript分享，若该分享中出现错误，希望大家指出，若能帮助到各位，不胜荣幸。

之前分享过添加一个点标注的方法，由于之前的写的比较详细且方法类似，这里就不细说，若有看不懂的可以先看看之前的那个分享 ArcGIS API for JavaScript 3.24 标注的添加和点击标注的回调事件

//文字
    var addTextSymbol = function(point,symbol,attributes,infoTemplate) {
        point = new DCI.esri.Point(point.longitude,point.latitude);
        symbol =  new DCI.esri.TextSymbol({
            'text': symbol.text || 'Missing text',
            'color': symbol.color || {a:1,r:0,g:0,b:0},  //{a:1,r:255,g:255,b:255}
            'angle': symbol.angle || 0,
            'xoffset': symbol.xoffset || 0,
            'yoffset': symbol.yoffset || 0,
            'font': new DCI.esri.Font(
                symbol.fontSize || "14pt",
                DCI.esri.Font.STYLE_ITALIC,
                DCI.esri.Font.VARIANT_NORMAL,
                DCI.esri.Font.WEIGHT_BOLD,
                symbol.fontFamily || "Courier"
            )
        });
        infoTemplate = infoTemplate ? new DCI.esri.InfoTemplate(infoTemplate) : '';

        var graphic = new DCI.esri.Graphic(point,symbol,attributes,infoTemplate);
        DCI.map.graphics.add(graphic);

        return [graphic]
    };

这是添加文字的方法，基本和添加点标注的方法一样

接下来是添加带背景的文字，先来看一下效果

ArcGIS API for JavaScript 3.24 文字标注的添加和带背景的文字添加

这样的标注在项目中经常会用到，所以我单独给写了一个方法，其实这个标注也就是将文字标注和点标注的一个结合

//有背景的文字
    var addBackgroundTextSymbol = function(point,symbol,textSymbol,attributes,infoTemplate){
        point = new DCI.esri.Point(point.longitude,point.latitude);
        var _symbol = new DCI.esri.SimpleMarkerSymbol({
            "color": symbol.color || {a:1,r:255,g:0,b:0} ,
            "size": symbol.size || 'auto',
            "angle": symbol.angle || 0,
            "xoffset": symbol.xoffset || 0,
            "yoffset": symbol.yoffset || 0,
            "style": "esriSMSCircle",
            "outline": {
                "color": symbol.outlineColor || "",
                "width": symbol.outlineWidth || 0,
                "type": "esriSLS",
                "style": "esriSLSSolid"
            }
        });
        symbol.size ? _symbol.setSize(symbol.size) : '';
        infoTemplate = infoTemplate ? new DCI.esri.InfoTemplate(infoTemplate) : '';

        var graphic = new DCI.esri.Graphic(point,_symbol,attributes,infoTemplate);
        DCI.map.graphics.add(graphic);
        
        textSymbol =  new DCI.esri.TextSymbol({
            'text': textSymbol.text || 'Missing text',
            'color': textSymbol.color || '',  //{a:1,r:255,g:255,b:255}
            'angle': textSymbol.angle || 0,
            'xoffset': textSymbol.xoffset || 0,
            'yoffset': textSymbol.yoffset || 0,
            'font': new DCI.esri.Font(
                textSymbol.fontSize || "12",
                DCI.esri.Font.STYLE_ITALIC,
                DCI.esri.Font.VARIANT_NORMAL,
                DCI.esri.Font.WEIGHT_BOLD,
                textSymbol.fontFamily || "Courier"
            )
        });

        var textGraphic = new DCI.esri.Graphic(point,textSymbol,attributes,infoTemplate);
        DCI.map.graphics.add(textGraphic);

        return [graphic,textGraphic]
    };

首先添加背景，然后在相同的位置添加文字，效果就能达到和上图一样的效果

ArcGIS API for JavaScript 3.24 文字标注的添加和带背景的文字添加

相关推荐