ceisum实现动态立体墙上下循环动画，颜色逐渐透明

创建一个AnimationWall.js

export default class AnimationWall {    
    constructor(viewer) {    
        this.viewer = viewer;    
        this.animationDirection = 1; // 1表示向上，-1表示向下    
    }    
    add(positions) {    
        const maximumHeights = Array(positions.length / 3).fill(6000);    
        const halfHeights = maximumHeights.map(height => height / 3); // 最大高度的一半  
        const minimumHeights = Array(positions.length / 3).fill(600); // 假设这是墙壁的基础高度  
        positions = Cesium.Cartesian3.fromDegreesArrayHeights(positions);    
        let dayMaximumHeights = Array(maximumHeights.length).fill(minimumHeights[0]); // 初始化为最小值    
    
        // 创建一个函数来处理动画    
        function animateWallHeights() {    
            // 创建一个新的数组来存储新的最大高度值    
            const newDayMaximumHeights = dayMaximumHeights.map((height, index) => {    
                // 计算新的高度    
                height += maximumHeights[index] * 0.01 * this.animationDirection;    
    
                // 检查是否到达边界，并改变方向    
                if (height > maximumHeights[index]) {    
                    height = maximumHeights[index];    
                    this.animationDirection = -1; // 到达最大高度，开始下降    
                } else if (height < halfHeights[index]) {    
                    height = halfHeights[index];    
                    this.animationDirection = 1; // 到达最大高度的一半，开始上升    
                }    
    
                return height;    
            }, this);    
    
            // 更新dayMaximumHeights以准备下一次回调    
            dayMaximumHeights = newDayMaximumHeights;    
    
            // 返回新的最大高度数组    
            return newDayMaximumHeights;    
        }    
          
        // 添加墙壁到Cesium Viewer  
        this.viewer.entities.add({    
            wall: {    
                positions,    
                maximumHeights: new Cesium.CallbackProperty(() => animateWallHeights.call(this), false),    
                minimumHeights,    
                material: new Cesium.WallDiffuseMaterialProperty({  
                    color: Cesium.Color.fromCssColorString("rgba(0,255,255,0.3)")  
                })  
            }    
        });    
    }    
}

页面里面引用这个js，调取这个 将坐标传入，我的是三维坐标xyz所以Array(positions.length / 3)，二维改成2就行了，墙体颜色是逐渐透明的，效果是从一半才开始往上动画，不是从底部开始的

new AnimationWall(Map3D.viewer).add(coordinates);