1、添加静态线:
// 黄色的带高度的线
const line = viewer.entities.add({
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(
[
108.72618445596407,
34.36220405179881
, 100,
107.23330986376953,
34.36525809045935
, 200,
]),
width: 5,
material: Cesium.Color.YELLOW,
},
});
2、动态线:
动态线条用Cesium.CallbackProperty回调函数来生成
new Cesium.CallbackProperty (callback, isConstant)
// callback CallbackProperty.Callback 也就是更改属性时要调用的函数。
// isConstant Boolean 当回调函数每次返回相同的值时为 true ,如果值会改变则为 false
// isContant = false才会有动态效果
再回调函数里更改polyline中的position(每个点)的位置属性,同时在最后返回一个新的cartesian3对象即可:
let long = 100;
let lat = 50;
let height = 50,
lineAct = viewer.entities.add({
polyline: {
positions: new Cesium.CallbackProperty(() => {
// 每次更新下一个点的位置
long += 0.005;
lat += 0.005;
height += 0.005;
return new Cesium.Cartesian3.fromDegreesArrayHeights([100,50,50,
long,lat,height])
}, false),
width: 5,
material: Cesium.Color.YELLOW,
},
});
这样的效果相当于从100,50,50这个坐标点开始,每次CallbackProperty回调函数对经纬度高度增加0.005作为下一个点的位置,从而动态生成
3、CallbackProperty里return一个cartesian3数组
也可以直接返回一个包含起始位置点和下一个目标位置点cartesian3数组,这里的[positions[index], positions[++index]]中index在每次的回调函数中都会加1,
所以第一次回调的结果:
positions[0], positions[1]
第二次:
positions[1], positions[2]
第三次:
positions[2], positions[3]
........依此类推,这样就是每次回调产生一条从第一组的第一个position点到第二个position点的线段,并且能无缝衔接上下一组的position,生成一个流光的效果
// 假如已经生成了一个包含了很多点的cartesian3类型的positions数组
const positionsLen = positions.length;
let index = 0;
lineAct = viewer.entities.add({
name: "动态线",
polyline: {
positions: new Cesium.CallbackProperty(() => {
if (index < positionsLen - 1) {
return [positions[index], positions[++index]]
}
else {
//这里return防止index超出position数组范围而报错
return lineAct.polyline.positions = positions
}
}, false),
width: 5,
material: Cesium.Color.YELLOW,
},
});