cesium箭头

### 实现 Cesium 中的箭头效果 在 Cesium 中创建或使用箭头效果可以通过定义特定几何形状并利用 `Cesium` 提供的各种图形属性来完成。对于平尾直箭头的具体实现，主要分为三个部分：头部、身体以及尾巴部分[^1]。 #### 定义关键节点坐标 为了构建箭头的不同组成部分，需要计算各个部分的关键节点坐标。这通常涉及到一些基础的向量运算和三角函数应用。例如，在确定箭头的方向之后，可以根据起始位置与结束位置之间的距离和角度关系，推算出顶部顶点的位置以及其他辅助点的位置。 ```javascript // 假设 start 和 end 是两个 Cartesian3 类型的对象表示起点和终点 var direction = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()); direction = Cesium.Cartesian3.normalize(direction, direction); var perpendicularVector = Cesium.Cartesian3.cross( direction, Cesium.Cartesian3.UNIT_UP, new Cesium.Cartesian3() ); perpendicularVector = Cesium.Cartesian3.normalize(perpendicularVector, perpendicularVector); const headSize = 0.2; // 箭头大小比例因子 ``` 上述代码片段展示了如何基于给定方向生成垂直于该方向的单位矢量，并据此调整箭头尺寸。 #### 绘制箭身及头部 一旦获得了必要的坐标数据，则可以调用 `viewer.entities.add()` 方法添加新的实体对象至场景中。针对箭头而言，可能既包含线段（用于描绘主体）也包含多边形（用来形成尖端）。下面是一个简单的例子说明怎样组合这两种元素： ```javascript function createArrow(start, end) { var arrowPositions = [ start, end, Cesium.Cartesian3.multiplyByScalar(perpendicularVector, headSize * 0.5, new Cesium.Cartesian3()), Cesium.Cartesian3.add(end, Cesium.Cartesian3.multiplyByScalar(perpendicularVector, headSize * 0.5, new Cesium.Cartesian3()), new Cesium.Cartesian3()) ]; return viewer.entities.add({ polyline: { positions: new Cesium.CallbackProperty(function () { return [start, end]; }, false), width: 2, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.8, color: Cesium.Color.RED.withAlpha(0.9) }) }, polygon: { hierarchy: new Cesar.GeometryInstanceAttribute(new Cesium.PolygonHierarchy([arrowPositions])), material: Cesium.Color.RED.withAlpha(0.6) } }); } ``` 此函数接受两个参数作为输入——即箭头的起点和终点，并返回所创建的新实体实例。注意这里还设置了不同的材质特性以增强视觉表现力。 #### 地面附着功能 如果希望让箭头紧贴地面显示而不是悬浮空中的话，可以在创建时设置 `clampToGround` 属性为 `true` 。这样做的好处是可以使箭头更加贴近实际地形特征而不受高度变化的影响[^2]。 ```javascript polyline :{ ... clampToGround : true }, polygon:{ ... clampToGround:true } ``` 通过以上步骤即可实现在 Cesium 应用程序内部自定义绘制具有不同样式的箭头标记。