You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

CesiumJS技术问题:折线两端加箭头及箭头尺寸控制

Cesium折线箭头的尺寸控制与双向箭头实现

1. 控制箭头的尺寸大小

原示例中使用的PolylineArrowMaterialProperty自带缩放控制参数,只需要在创建材质时传入scale属性即可调整箭头大小:

// 示例:将箭头放大2倍,数值越小箭头越小
const arrowMaterial = new Cesium.PolylineArrowMaterialProperty({
  color: Cesium.Color.RED,
  scale: 2
});

调整scale的数值就能灵活控制箭头尺寸,比如设为0.5时箭头会缩小到原来的一半。

2. 在折线另一端添加反向箭头

由于PolylineArrowMaterialProperty默认只在折线末端生成箭头,要在起点添加反向箭头,只需复制原折线的坐标数组并反转,再创建一个新的折线实体即可:

// 假设原折线坐标数组为positions
const reversePositions = positions.slice().reverse(); // 反转坐标顺序

// 创建带反向箭头的折线实体
viewer.entities.add({
  polyline: {
    positions: reversePositions,
    width: 5,
    material: new Cesium.PolylineArrowMaterialProperty({
      color: Cesium.Color.RED,
      scale: 2 // 可与正向箭头使用相同或不同的缩放比例
    })
  }
});

两个折线叠加后,原折线的起点会出现指向反向的箭头,和末端箭头形成双向效果。


内容的提问来源于stack exchange,提问作者Eric G

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 21:57:30