本教程详细介绍了如何利用arcgis javascript api实现web样式符号的动态旋转。我们将聚焦于使用`simplerenderer`中的`rotation`视觉变量，根据要素的属性（如gps航向数据）来精确控制地图上符号的方向。文章将通过代码示例、实现步骤和注意事项，指导开发者构建能够响应数据变化的地图应用，使符号（如车辆图标）能实时反映其在现实世界中的朝向。
1. 引言
在地图应用中，动态展示移动对象的方向是一个常见需求，例如在实时车辆追踪系统中，车辆图标应根据其GPS航向数据进行旋转，以准确反映其行驶方向。ArcGIS JavaScript API提供了强大的渲染能力，通过视觉变量（Visual Variables）可以轻松实现这一目标。本教程将深入探讨如何结合Web样式符号和SimpleRenderer的rotation视觉变量，实现基于数据属性的符号动态旋转。
2. 核心概念：使用SimpleRenderer和rotation视觉变量
ArcGIS API for JavaScript中的Renderer负责定义要素在地图上的显示方式。对于需要根据属性值动态改变外观的场景，Renderer的visualVariables属性是关键。其中，rotation视觉变量专门用于控制符号的旋转角度。
- SimpleRenderer: 最基础的渲染器，用于为图层中的所有要素应用相同的符号样式。
- visualVariables: Renderer的一个属性，它是一个数组，允许根据要素的属性动态调整符号的视觉效果，如颜色、大小、透明度或旋转。
-
rotation视觉变量:
- type: 必须设置为 "rotation"。
- field 或 valueExpression: 指定用于驱动旋转的属性字段名或一个Arcade表达式。
- field: 直接使用要素属性中的某个字段的值作为旋转角度。
- valueExpression: 提供一个Arcade表达式，可以对一个或多个字段进行计算，然后返回旋转角度。例如，"$feature.heading" 表示使用要素的heading属性值。
- rotationType: （可选）定义旋转的原点，例如"geographic"（正北向上，顺时针增加）或"arithmetic"（正东向上，逆时针增加）。默认通常是"arithmetic"。对于GPS航向，通常使用"geographic"。
3. 实现步骤
要实现基于GPS航向的Web样式符号旋转，主要步骤如下：
3.1 准备Web样式符号
首先，定义一个Web样式符号。Web样式符号是ArcGIS API提供的一种便捷方式，可以引用预定义的符号库中的符号，例如交通工具、建筑物等。
const carSymbol = {
type: "web-style", // 指定符号类型为Web样式
styleName: "EsriRealisticTransportationStyle", // 选择一个样式库
name: "BMW_3-Series" // 指定样式库中的具体符号名称
};
3.2 创建要素图层和渲染器
为了应用rotation视觉变量，我们需要将符号应用于一个FeatureLayer，并通过SimpleRenderer来管理其渲染。
-
准备要素数据: 假设我们有一个包含longitude、latitude和heading（航向角度）的GPS数据点。
Miller CSV TSV JSON 数据处理器下载Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
const gpsData = { longitude: -101.9498125, latitude: 41.2097775, heading: 45 // 假设初始航向为45度 }; -
创建Graphic: 将GPS数据转换为ArcGIS Graphic对象。
const carGraphic = new Graphic({ geometry: { type: "point", x: gpsData.longitude, y: gpsData.latitude }, attributes: { ObjectID: 1, // FeatureLayer需要ObjectID字段 heading: gpsData.heading } }); -
定义SimpleRenderer并应用rotation视觉变量: 这是实现旋转的核心。
const carRenderer = new SimpleRenderer({ symbol: carSymbol, // 使用之前定义的Web样式符号 visualVariables: [ { type: "rotation", field: "heading", // 使用Graphic的heading属性作为旋转角度 // 或者使用 valueExpression: "$feature.heading" rotationType: "geographic" // 如果航向是地理方向（正北0度，顺时针增加），则设置为geographic } ] }); -
创建FeatureLayer: 将Graphic和Renderer结合起来创建FeatureLayer。
const carsLayer = new FeatureLayer({ source: [carGraphic], // 图层数据源 objectIdField: "ObjectID", // 必须指定ObjectID字段 renderer: carRenderer // 应用渲染器 });
3.3 将图层添加到地图
最后，将配置好的FeatureLayer添加到地图中。
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/renderers/SimpleRenderer"
], (Map, MapView, FeatureLayer, Graphic, SimpleRenderer) => {
const map = new Map({
basemap: "satellite"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 15,
center: [-101.9498125, 41.2097775],
});
// 1. 准备Web样式符号
const carSymbol = {
type: "web-style",
styleName: "EsriRealisticTransportationStyle",
name: "BMW_3-Series"
};
// 2. 准备要素数据和Graphic
const initialGpsData = {
longitude: -101.9498125,
latitude: 41.2097775,
heading: 45 // 初始航向
};
const carGraphic = new Graphic({
geometry: {
type: "point",
x: initialGpsData.longitude,
y: initialGpsData.latitude
},
attributes: {
ObjectID: 1,
heading: initialGpsData.heading
}
});
// 3. 定义SimpleRenderer并应用rotation视觉变量
const carRenderer = new SimpleRenderer({
symbol: carSymbol,
visualVariables: [
{
type: "rotation",
field: "heading", // 使用Graphic的heading属性
rotationType: "geographic" // 假设航向是地理方向
}
]
});
// 4. 创建FeatureLayer
const carsLayer = new FeatureLayer({
source: [carGraphic],
objectIdField: "ObjectID",
renderer: carRenderer
});
// 5. 将图层添加到地图
map.add(carsLayer);
// 示例：动态更新航向并刷新渲染
let currentHeading = initialGpsData.heading;
document.getElementById("rotatePlus45Button").addEventListener("click", () => {
currentHeading = (currentHeading + 45) % 360; // 每次增加45度
document.getElementById("rotationDisplay").innerHTML = currentHeading;
// 更新Graphic的属性
carGraphic.attributes.heading = currentHeading;
// 重新设置渲染器，强制图层刷新以应用新的视觉变量
// 注意：对于FeatureLayer，直接修改Graphic属性后，
// 需要通过更新Renderer或重新设置图层数据来触发重绘。
// 这里通过重新创建Renderer来强制刷新。
carsLayer.renderer = new SimpleRenderer({
symbol: carSymbol,
visualVariables: [
{
type: "rotation",
field: "heading",
rotationType: "geographic"
}
]
});
});
document.getElementById("rotationDisplay").innerHTML = currentHeading;
});
3.4 完整的HTML示例
<meta charset="utf-8"><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><title>ArcGIS JS API教程：基于GPS航向旋转Web样式符号</title><style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#controlPanel {
position: absolute;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
z-index: 10;
}
</style><link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.26/"></script><div id="controlPanel">
当前航向: <span id="rotationDisplay"></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"
], (Map, MapView, FeatureLayer, Graphic, SimpleRenderer) => {
const map = new Map({
basemap: "satellite"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 15,
center: [-101.9498125, 41.2097775],
});
const carSymbol = {
type: "web-style",
styleName: "EsriRealisticTransportationStyle",
name: "BMW_3-Series"
};
const initialGpsData = {
longitude: -101.9498125,
latitude: 41.2097775,
heading: 45 // 初始航向
};
const carGraphic = new Graphic({
geometry: {
type: "point",
x: initialGpsData.longitude,
y: initialGpsData.latitude
},
attributes: {
ObjectID: 1,
heading: initialGpsData.heading
}
});
const carRenderer = new SimpleRenderer({
symbol: carSymbol,
visualVariables: [
{
type: "rotation",
field: "heading",
rotationType: "geographic"
}
]
});
const carsLayer = new FeatureLayer({
source: [carGraphic],
objectIdField: "ObjectID",
renderer: carRenderer
});
map.add(carsLayer);
let currentHeading = initialGpsData.heading;
document.getElementById("rotatePlus45Button").addEventListener("click", () => {
currentHeading = (currentHeading + 45) % 360;
document.getElementById("rotationDisplay").innerHTML = currentHeading;
// 更新Graphic的属性
carGraphic.attributes.heading = currentHeading;
// 为了让FeatureLayer重新渲染并应用新的属性，
// 最直接的方法是重新设置其renderer。
// 在实际应用中，如果数据源是动态更新的FeatureLayer，
// 可能需要调用 layer.queryFeatures() 或 layer.refresh()，
// 或者直接修改数据源（如FeatureTable）来触发更新。
carsLayer.renderer = new SimpleRenderer({
symbol: carSymbol,
visualVariables: [
{
type: "rotation",
field: "heading",
rotationType: "geographic"
}
]
});
});
document.getElementById("rotationDisplay").innerHTML = currentHeading;
});
</script>
4. 注意事项
- visualVariables应用于Renderer: 关键点在于rotation视觉变量是Renderer的属性，而不是直接应用于单个Graphic的symbol。如果你直接创建Graphic并将其添加到GraphicsLayer，你需要手动修改Graphic.symbol.angle属性来实现旋转。但对于数据驱动的批量旋转，FeatureLayer与Renderer的组合更为高效和推荐。
-
field vs valueExpression:
- field: 当旋转角度直接存储在要素的一个属性字段中时使用。
- valueExpression: 当旋转角度需要通过一个或多个字段计算得出时使用，或者当字段名可能不固定时，它提供了更大的灵活性。
-
rotationType: 根据你的数据来源，选择正确的rotationType非常重要。
- "geographic": 0度指向正北，顺时针方向增加。这通常与GPS航向数据（heading）一致。
- "arithmetic": 0度指向正东，逆时针方向增加。
-
动态数据更新: 当底层数据（例如GPS航向）发生变化时，你需要确保地图能够重新渲染以反映这些变化。
- 如果使用FeatureLayer，更新要素属性后，可能需要重新设置layer.renderer来强制刷新，或者如果你的FeatureLayer是连接到实时数据源，数据更新会自动触发重绘。
- 对于更复杂的实时更新场景，可以考虑使用StreamLayer或结合WebSocket等技术，并在数据更新时调用layer.refresh()。
- 性能考虑: 如果地图上有大量需要实时旋转的要素，频繁地更新Renderer或FeatureLayer可能会影响性能。在这种情况下，优化数据处理和渲染策略（例如，只更新视口内的要素）变得很重要。
5. 总结
通过本教程，我们学习了如何利用ArcGIS JavaScript API中的SimpleRenderer和rotation视觉变量，实现Web样式符号基于数据属性的动态旋转。这种方法不仅能够让地图上的符号更加生动地反映现实世界的状态，也为开发复杂的实时地理空间应用提供了强大的工具。掌握这一技术，将使你的地图应用在展示移动对象时更具表现力和实用性。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
