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]};

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

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

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

//有背景的文字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 文字标注的添加和带背景的文字添加相关推荐

ArcGIS API For JavaScript Font字体简介，下载及本地部署
一.TextSymbol 字体font简介在ArcGIS API For JavaScript开发中,设置标注label 或Graphic时若使用TextSymbol,用font设置文字样式,如字体 ...
用ArcGIS API for JavaScript制作三维可视化图
前段时间接了一个项目,涉及到了空间信息三维可视化的工作.之前在网上查找无意中看到ArcGIS API for JavaScript(以下简称"ArcGIS API"或"该 ...
01 ArcGIS API for JavaScript离线部署——部署到本地服务器
ArcGIS API for JavaScript开发的首要步骤就是引入ArcGIS想关的样式文件及开发包,对于此样式文件及开发包的引用有两种形式:在线引用和离线加载.对于一般的示例程序编写,我们只需 ...
ArcGIS API for JavaScript如何使用本地的字体库
需求: ArcGIS API for JavaScript如何使用本地的字体库,解决内网环境,或者我想用我自己的好看的字体的需求. 思路: 下载对应的字体文件(.pbf)或者将操作系统自带的字体文件( ...
ESRI官网关于Javascript的内容(1)__获取ArcGIS API for Javascript
前言最近发现自己又可以静下心来学习了,所以赶紧去ESRI的开发官网上看了看,虽然英文我慢慢看也看得懂,但是我估计很多人是不想看或者说看不懂的,所以我觉得还是在我静的下心来的时候为自己和大家翻译一下~ ...
ArcGIS API for JavaScript官网解析
写在前面此课程的重点是讲解ArcGIS API for JavaScript官网提供的各个API模块,可以当做是一个字典来使用,版本默认使用最新版(4.24,当前版本),如果此课程和<WebG ...
视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...
arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...

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

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

最新文章

热门文章