「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

背景需求

工作业务中遇到需要，一些数据有经纬度，要把数据在地图中定位显示。用的地图是ArcGIS，前端技术是Vue，因此需要用到ArcGIS API for JavaScript，版本是3.x的。之前完全没接触过，官方文档是英文的，借着谷歌翻译，和官方的示例，慢慢实现了一点出来。

文本标记的实现，主要是用到2个API，标记符号用SimpleMarkerSymbol，文本显示用TextSymbol

文本符号对象TextSymbol并不会显示标记，只有文本，研究了好久确实没有标记样式的属性。因此标记需要另外用SimpleMarkerSymbol实现

本文主要描述TextSymbol的使用，对于SimpleMarkerSymbol不过多赘述

下面是实现效果图

文本符号和标记符号都是通过循环增加创建多个对象后，添加到图形Graphic中。

实现步骤

首先，需要在添加标记点的基础上再引入以下资源：

"esri/map",
"esri/geometry/Point",
"esri/graphic",
+"esri/symbols/TextSymbol",
+"esri/symbols/Font",
"dojo/domReady!"

标记点的经纬度和标记的文本内容

// 标记点的经纬度坐标
let point = [
  [120.444444, 30.184722],
  [120.403055, 30.278333],
  [120.168888, 29.951944],
  [120.244722, 30.19]
];
//标记点的文字标记
var pointLabel = [
  ["first"],
  ["secode"],
  ["there"],
  ["four"]
];

3.循环 标记点的经纬度坐标和文本内容, 创建坐标点和文本

point.forEach((ele,index)=>{
  //创建文本标记 设置文本内容、颜色、偏移量、字体
  let textSymbol = new TextSymbol(pointLabel[index].toString()).setColor("#0b539d")
      .setOffset(0,15)
      .setFont(new Font("15px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Arial"));
  //创建点
  let pointObj=new Point(ele);
  var graphic = new Graphic(pointObj,createSymbol(iconpath, fill_color));
  //创建文本图形
  let graphicText = new Graphic(pointObj, textSymbol);
  //将文本标记和点标记图形添加到地图中
  self.map.graphics.add(graphicText);
  self.map.graphics.add(graphic);
})

到此就能实现效果图上的效果啦

接下来在使用TextSymbol对象的时候有几个注意点

注意点

将TextSymbol对象添加到，必须先用[经度,纬度]的数组，创建好Point对象，将TextSymbol对象和Point对象作为参数再创建Graphic对象
TextSymbol对象设置字体属性的时候，需要引入"esri/symbols/Font"的字体资源才能有效。用rgb设置颜色时，同样需要引入"esri/Color"的颜色资源。

ArcGIS API for JavaScript 地图增加文本标记

背景需求

实现步骤

注意点