向图层添加多个标注类

此示例演示如何在 2D MapView 中使用多个标注类标注 FeatureLayer。

标注表达式始终使用 Arcade 构造。Arcade 提供了一系列内置函数，允许您在表达式中执行数学计算和逻辑运算。此示例中使用多个标注类以具有视觉吸引力的样式显示有关要素的信息。请参阅标注指南页面，了解更多信息和已知限制。

该示例使用五个标注类显示世界各地气象站的天气状况。最初，地图将缩小以显示多个气象站，仅显示温度标注类。应用程序右上角的书签微件将允许您快速放大以查看所有标注类。

首先，温度显示在 above-left 相对于要素的位置。我们采用一些 where 逻辑来以红色显示 32 度及以上的温度，以蓝色显示低于 32 度的温度。然后，在above-right位置显示风速和风向，在 below-left 位置显示相对湿度，在 below-right 位置显示气象站名称。两个温度标注类未设置 minScale 属性值，而其他三个标注类的 minScale 值为 2500000，因此当您缩小时，只有温度标注变为可见。

const tempArcade = "Round($feature.TEMP) + '° F';";
const lowTempClass = {
  labelExpressionInfo: {
    expression: tempArcade
  },
  labelPlacement: "above-left",
  where: "TEMP <= 32"
};
const highTempClass = {
  labelExpressionInfo: {
    expression: tempArcade
  },
  labelPlacement: "above-left",
  where: "TEMP > 32"
};

const windArcade = document.getElementById("wind-direction").text;
const windClass = {
  labelExpressionInfo: {
    expression: windArcade
  },
  labelPlacement: "above-right",
  minScale: minScale
};

const humidityArcade = "$feature.R_HUMIDITY + '% RH'";
const humidityClass = {
  labelExpressionInfo: {
    expression: humidityArcade
  },
  labelPlacement: "below-left",
  minScale: minScale
};

const nameArcade = "$feature.STATION_NAME";
const nameClass = {
  labelPlacement: "below-right",
  labelExpressionInfo: {
    expression: nameArcade
  },
  minScale: minScale
};

layer.labelingInfo = [nameClass, humidityClass, lowTempClass, highTempClass, windClass];

此示例还使用 When() 函数将风向值重新分类为 N、NE、E、SE、S、SW、W 或 NW。风向表达式的最后一行将作为标注文本返回。要阅读有关 Arcade 及其语法的更多详细信息，请参阅 Arcade 指南页面。

MapView

FeatureLayer

labeling

GeoScene API for JavaScript示例中心

向图层添加多个标注类