CesiumJS动态生成线

最新推荐文章于 2024-07-29 10:06:34 发布

xiaoleetongxue

最新推荐文章于 2024-07-29 10:06:34 发布

阅读量256

点赞数 4

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_53524141/article/details/140590889

版权

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,
        },
      });