本教程详细介绍了如何在arcgis javascript api中利用`simplerenderer`的`rotation`视觉变量，根据数据属性（如gps航向）动态旋转web样式符号。通过配置`valueexpression`引用数据字段，开发者可以轻松实现车辆、传感器等地图元素的实时方向展示，提升地图应用的交互性和信息表达能力。
在地理信息系统（GIS）应用中，经常需要将地图上的符号（如车辆、飞机、传感器）根据其运动方向或朝向进行旋转，以更直观地表达其状态。ArcGIS JavaScript API 提供了一种强大且灵活的机制来实现这一目标，即通过渲染器（Renderer）的视觉变量（Visual Variables）功能，特别是rotation类型。本教程将深入探讨如何利用WebStyleSymbol和SimpleRenderer结合rotation视觉变量，实现图形图层的动态旋转。
1. 理解Web样式符号与渲染器
在ArcGIS JavaScript API中，WebStyleSymbol允许我们使用Esri提供的丰富符号库，这些符号通常具有高质量的渲染效果。当我们需要将这些符号绘制到地图上时，通常会用到渲染器（Renderer）。渲染器负责定义图层中要素的显示方式，包括颜色、大小、透明度以及本教程关注的——旋转。
SimpleRenderer是一种常见的渲染器类型，它为图层中的所有要素应用相同的符号。然而，通过结合visualVariables，SimpleRenderer可以根据要素的属性动态调整符号的某些视觉特性。
2. 使用rotation视觉变量实现符号旋转
rotation视觉变量是visualVariables数组中的一个特殊类型，专门用于控制符号的旋转角度。它通常与valueExpression属性一起使用，valueExpression允许您指定一个表达式，该表达式将根据要素的属性计算出旋转角度。
立即学习“Java免费学习笔记（深入）”；
核心概念：
- type: "rotation": 指定这是一个旋转视觉变量。
- valueExpression: 一个Arcade表达式字符串，用于从要素属性中获取旋转值。例如，如果您的要素有一个名为heading的属性表示航向，则可以使用"$feature.heading"。
- rotationType (可选): 定义旋转的参考点，默认为arithmetic（顺时针从东向0度开始），也可以是geographic（顺时针从北向0度开始）。
3. 实现步骤与代码示例
以下代码示例将演示如何创建一个包含Web样式符号的FeatureLayer，并使用SimpleRenderer的rotation视觉变量根据模拟的航向数据进行旋转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>动态旋转Web样式符号教程</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#controls {
position: absolute;
top: 10px;
left: 10px;
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 10;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.28/"></script>
</head>
<body>
<div id="controls">
当前旋转角度: <span id="rotationValue">0</span>°
<button id="rotatePlus45Button">旋转 +45°</button>
</div>
<div id="viewDiv"></div>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/renderers/SimpleRenderer",
"esri/symbols/WebStyleSymbol"
], (Map, MapView, FeatureLayer, Graphic, SimpleRenderer, WebStyleSymbol) => {
// 1. 定义地图和视图
const map = new Map({
basemap: "satellite" // 使用卫星底图
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 15,
center: [-101.94981250000075, 41.20977753557709], // 初始中心点
});
// 2. 创建一个Web样式符号
const carSymbol = new WebStyleSymbol({
styleName: "EsriRealisticTransportationStyle", // 使用交通工具样式库
name: "BMW_3-Series", // 选择一个宝马3系汽车符号
// 也可以使用其他符号，例如：
// styleName: "Esri2DPointSymbolsStyle",
// name: "ferry"
});
// 3. 创建一个FeatureLayer的源数据（一个模拟的汽车点）
// 注意：这里我们为Graphic添加了一个'heading'属性
let currentHeading = 0; // 初始航向
const carGraphic = new Graphic({
geometry: {
type: "point",
x: -101.94981250000075,
y: 41.20977753557709
},
attributes: {
ObjectID: 1, // FeatureLayer需要ObjectID
heading: currentHeading // 模拟的航向数据
}
});
// 4. 定义渲染器，并应用rotation视觉变量
// rotationType: "geographic" 表示0度朝北，顺时针旋转
const createCarRenderer = (heading) => {
return new SimpleRenderer({
symbol: carSymbol,
visualVariables: [
{
type: "rotation",
// valueExpression直接引用graphic的heading属性
// 也可以是 `$feature.heading` 如果数据源是FeatureLayer
valueExpression: `${heading}`, // 这里我们直接使用传入的heading值
rotationType: "geographic" // 0度朝北，顺时针旋转
}
]
});
};
// 5. 创建FeatureLayer
// 注意：FeatureLayer通常用于处理来自服务的数据，但也可以通过'source'属性接收Graphic数组
const carsLayer = new FeatureLayer({
source: [carGraphic], // 将汽车Graphic作为图层源
objectIdField: "ObjectID", // 必须指定ObjectID字段
renderer: createCarRenderer(currentHeading) // 初始渲染器
});
// 将图层添加到地图
map.add(carsLayer);
// 6. 动态更新旋转角度的交互功能
document.getElementById("rotatePlus45Button").addEventListener("click", () => {
currentHeading = (currentHeading + 45) % 360; // 每次增加45度，并保持在0-359范围内
document.getElementById("rotationValue").innerHTML = currentHeading;
// 更新FeatureLayer的渲染器以应用新的旋转角度
carsLayer.renderer = createCarRenderer(currentHeading);
});
// 初始显示旋转角度
document.getElementById("rotationValue").innerHTML = currentHeading;
});
</script>
</body>
</html>4. 代码解析
- WebStyleSymbol的创建: new WebStyleSymbol({ styleName: "EsriRealisticTransportationStyle", name: "BMW_3-Series" }) 创建了一个具体的Web样式符号，这里选择了一辆BMW汽车。
- Graphic与attributes: 我们创建了一个Graphic来代表地图上的汽车，并为其attributes添加了一个heading字段。这个字段将用于驱动旋转。在实际应用中，heading值会来自GPS或其他传感器数据。
-
SimpleRenderer的配置:
- symbol: carSymbol：指定了要使用的符号。
- visualVariables：这是一个数组，包含了所有的视觉变量。
- type: "rotation"：明确指出我们要进行符号旋转。
- valueExpression:${heading}`：这是关键部分。它定义了如何从要素数据中获取旋转值。在我们的示例中，我们直接传入一个heading变量。在实际从FeatureLayer读取数据时，这通常是"$feature.heading"，其中heading`是FeatureLayer数据源中的一个字段名。
- rotationType: "geographic"：设置旋转的参考系。geographic表示0度朝北，顺时针增加；arithmetic表示0度朝东，逆时针增加。根据您的数据来源和需求选择合适的类型。
- FeatureLayer的创建: FeatureLayer被用来承载和渲染我们的Graphic。虽然通常用于从服务加载数据，但通过source属性，它也可以直接接受Graphic数组。
- 动态更新: 当用户点击按钮时，currentHeading值会更新，然后通过重新设置carsLayer.renderer = createCarRenderer(currentHeading);来强制图层重新渲染，从而应用新的旋转角度。
5. 注意事项与最佳实践
- 数据源: 确保您的数据源（无论是REST服务、GeoJSON还是本地数据）包含一个表示方向或航向的字段，并且其值是有效的角度（通常是0-360度）。
- 旋转类型: 根据您的数据标准和期望的显示效果，正确选择rotationType（geographic或arithmetic）。geographic更符合GPS航向的直观理解（0度北，90度东）。
- 性能: 对于包含大量要素的图层，频繁地更新整个renderer可能会影响性能。在实时数据流场景下，如果仅单个或少数要素的属性发生变化，可以考虑直接更新Graphic的attributes，然后调用layer.refresh()（如果图层支持）或更新特定的Graphic。然而，对于FeatureLayer，重新设置renderer是更新所有要素视觉变量的有效方式。
- 符号锚点: 确保您的Web样式符号的锚点（origin）设置正确。通常，符号的中心点是旋转的轴心。如果符号设计不当，旋转效果可能不符合预期。
- Arcade表达式: valueExpression支持Arcade表达式，这意味着您可以进行更复杂的计算来得出旋转角度，例如：valueExpression: "($feature.start_angle + $feature.end_angle) / 2"。
总结
通过本教程，您应该已经掌握了如何在ArcGIS JavaScript API中利用WebStyleSymbol和SimpleRenderer的rotation视觉变量，根据数据属性实现地图符号的动态旋转。这一功能对于构建实时追踪、态势感知等应用至关重要，它能够显著提升地图的可读性和信息传达效率。记住，关键在于正确配置rotation视觉变量的valueExpression，并根据需要动态更新渲染器以响应数据变化。
