ArcGIS JS如何添加标注？

在ArcGIS JavaScript API（简称ArcGIS JS API）中，标注是地图信息可视化的重要手段，能够帮助用户快速理解地理要素的属性信息，通过合理配置标注样式、位置和内容，可以显著提升地图的可读性和交互性，本文将围绕ArcGIS JS API的标注功能展开，详细介绍其实现方式、配置选项及最佳实践。

标注的基本实现

ArcGIS JS API的标注主要通过Graphic类和TextSymbol类来实现，首先需要创建一个Graphic对象，设置其几何位置和属性信息，然后使用TextSymbol定义标注的样式（如字体、颜色、大小），最后将Graphic添加到地图的GraphicsLayer中,以下为简单示例代码：

require(["esri/Graphic", "esri/symbols/TextSymbol", "esri/geometry/Point"], function(Graphic, TextSymbol, Point) {
  // 创建标注符号
  const textSymbol = new TextSymbol({
    text: "示例标注",
    color: "#333",
    font: {
      size: 12,
      family: "Arial"
    }
  });
  // 创建几何点
  const point = new Point([116.4, 39.9]); // 经纬度坐标
  // 创建图形并添加符号
  const graphic = new Graphic({
    geometry: point,
    symbol: textSymbol
  });
  // 添加到图层
  graphicsLayer.add(graphic);
});

标注的高级配置

动态标注内容通常来自要素的属性字段，通过绑定数据源，可以实现动态标注，从FeatureLayer中提取字段值：

featureLayer.renderer.symbol = new TextSymbol({
  text: "{name}", // 绑定"name"字段
  font: { size: 10 }
});

标注位置调整

默认情况下，标注位于几何中心点，可通过offset属性调整位置,避免与符号重叠：

textSymbol.offset = [0, -10]; // 向上偏移10像素

标注冲突处理

当多个标注重叠时，可通过labelingProperties设置冲突解决策略，如stackLabel（堆叠显示）或avoidCollisions（自动避让）：

view.whenLayerView(featureLayer).then(function(layerView) {
  layerView labelingProperties = {
    conflictResolution: "static"
  };
});

标注性能优化

大量标注可能影响地图渲染性能,建议采用以下优化措施：

• ：直接在图层级别配置标注，减少手动管理Graphic的开销。
• 按需显示标注：通过设置minScale和maxScale控制标注显示的缩放级别。
• 简化标注内容：避免使用过长或复杂的文本,必要时截断或缩写。

标注样式自定义

通过TextSymbol的属性，可灵活调整标注外观：
| 属性 | 说明 | 示例值 |
|—————|————————–|———————-|
| color | 标注颜色 | “#FF0000″（红色） |
| font | 字体样式 | {size: 14, weight: "bold"} |
| halo | 文字光晕效果 | {color: "white", size: 2} |
| angle | 文字旋转角度（度） | 45 |
| horizontalAlignment | 水平对齐方式 | “center” |

相关问答FAQs

Q1：如何在ArcGIS JS API中实现标注的鼠标悬停交互？
A1：可通过监听Graphic的mouse-over事件,动态修改标注样式或显示弹窗。

graphic.on("mouse-over", function() {
  textSymbol.color = "#FF0000"; // 悬停时变红
  view.graphics.add(graphic);
});

Q2：如何导出包含标注的地图为图片？
A2：使用view.takeScreenshot()方法截取当前视图，标注会自动包含在导出结果中,需确保标注已正确渲染到地图上：

view.takeScreenshot().then(function(result) {
  const dataUrl = result.dataURL;
  const link = document.createElement("a");
  link.href = dataUrl;
  link.download = "map_with_labels.png";
  link.click();
});