使用 Arcade 表达式标注要素
本示例演示如何使用 Arcade 表达式在 FeatureLayer 中标注要素。Arcade 是一种简单、轻量级的脚本语言，可以在运行时解析·表达式。在 Arcade 中，你可以使用 $feature 全局变量访问要素属性。例如，为了使用 CITY_NAME 字段标注城市，你可以使用：$feature.CITY_NAME 。Arcade 提供了很多可用于执行数学计算和逻辑操作的内置函数。表达式最后一行必须是字符串或者数字。
例如，此示例使用 When() 函数将风向值重新分类为 N、NE、E、SE、S、SW、W 和 NW 。风向表达式的最后一行返回标签文本。要阅读有关 Arcade 及其语法的更多详细信息，请参阅 https://developers.arcgis.com/javascript/latest/guide/arcade/index.html 。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Label features using Arcade expressions - 4.5</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<!-- Arcade 表达式-->
<script type="text/plain" id="wind-direction">
var DEG = $feature.WIND_DIRECT;
var SPEED = $feature.WIND_SPEED;
var DIR = When(
SPEED == 0, "", (DEG < 22.5 && DEG >= 0) || DEG > 337.5, "N",
DEG >= 22.5 && DEG < 67.5, "NE",
DEG >= 67.5 && DEG < 112.5, "E",
DEG >= 112.5 && DEG < 157.5, "SE",
DEG >= 157.5 && DEG < 202.5, "S",
DEG >= 202.5 && DEG < 247.5, "SW",
DEG >= 247.5 && DEG < 292.5, "W",
DEG >= 292.5 && DEG < 337.5, "NW", ""
);
return SPEED + " mph " + DIR;
</script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
], function(Map, SceneView, FeatureLayer
) {
var map = new Map({
basemap: "topo"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: -10930027,
y: 5458284,
z: 126663,
spatialReference: {
wkid: 102100
}
},
heading: 63,
tilt: 73
},
constraints: {
altitude: {
min: 100000
}
}
});
//////////////////////////
//// ////
//// wind label class ////
//// ////
//////////////////////////
// 从 script 元素获取 Arcade 字符串表达式
var windArcade = document.getElementById("wind-direction").text;
// 在这个数组中为标签类保存颜色
var windClasses = [
{min: 0, max: 67.5, color: "#4c82c4"},
{min: 67.5, max: 157.5, color: "#6c4cc4"},
{min: 157.5, max: 247.5, color: "#ae4cc4"},
{min: 247.5, max: 337.5, color: "#c44c88"},
{min: 337.5, max: 360, color: "#4c82c4"}
];
// 创建用于 labelingInfo 的 class 数组
var windLabelClasses = windClasses.map(function(windClass) {
return {
labelExpressionInfo: {
expression: windArcade // 设置 Arcade 表达式
},
where: "WIND_DIRECT > " + windClass.min +
" AND WIND_DIRECT <= " + windClass.max,
labelPlacement: "above-center",
symbol: {
type: "label-3d",
symbolLayers: [{
type: "text",
material: { color: "white" },
halo: {
color: windClass.color,
size: 1
},
size: 12
}]
}
};
});
// 创建图层并添加到地图
var layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/weather_stations_010417/FeatureServer/0",
elevationInfo: {
mode: "relative-to-ground",
offset: 1000
},
renderer: {
type: "simple",
symbol: {
type: "point-3d",
symbolLayers: [{
type: "object",
material: { color: "#a38a8a" },
resource: { primitive: "tetrahedron" },
width: 10000,
depth: 20000,
height: 1000
}]
},
visualVariables: [{
type: "rotation",
// 四面体默认指向南，所以我们需要减去180度
valueExpression: "$feature.WIND_DIRECT - 180",
axis: "heading"
}]
},
// labelingInfo 可能包含多个 class，以在同一图层中以不同方式表示要素，
// 但是你不能在一个要素上使用多个标签，每个要素总是只有一个满足 where 条件的标签
labelingInfo: windLabelClasses,
labelsVisible: true,
opacity: 1
});
map.add(layer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
（完）