Cesium之动画原理（CallbackProperty）

Cesium之动画原理（CallbackProperty）

CallbackProperty是一个类，其值由回调函数延迟计算。也就是说它在不断地自我调用，每当期返回的对象有改变，就抛出改编后的值。

利用这种特性，我们就可以在定义材质时，用CallbackProperty生成动态的对象赋值给材质参数，就可以得到动态材质的效果。

例子：

1.动态随机颜色材质

let aniMaterial =  new Cesium.ColorMaterialProperty(
                    new Cesium.CallbackProperty(function() {
                    return Cesium.Color.fromRandom({
                        minimumRed : 0.75,
                        minimumGreen : 0.75,
                        minimumBlue : 0.75,
                        alpha : 1.0
                    });
                }, false))

2.配合cesium材质可以使用canvas绘制图片加载材质的方式，可以做拖尾效果的材质

// 先添加两个canvas画布
// 因为画布内变化CallbackProperty监控不到，所以用两个画布切换的方式达成效果
let link = document.createElement('canvas')
link.style.width = '700px'
link.style.height = '100px'
link.setAttribute('class', 'canvas')
link.setAttribute('id', 'canvas-a')
this.$refs.mainDiv.appendChild(link)
let link = document.createElement('canvas')
link.style.width = '700px'
link.style.height = '100px'
link.setAttribute('class', 'canvas')
link.setAttribute('id', 'canvas-a')
this.$refs.mainDiv.appendChild(link)
// 生成材质
let i = 200 // 控制图片出现时间
let colori = '#f00' // 控制光效颜色
let curCanvas = 'a' // 控制canvas的id
let RandomColorMaterial =  new Cesium.ImageMaterialProperty({
      //添加回调
      image: new Cesium.CallbackProperty(() => {
            var canvas = document.getElementById("canvas-" + curCanvas);
            let cwidth = 700;
            let cheight = 100;
            var ctx=canvas.getContext("2d");
            var img=new Image();
            img.src = light2;
            ctx.clearRect(0,0,cwidth,cheight);
            img.onload = function() {
                if(i<=cwidth){
                       ctx.drawImage(img,i,-50);
                    }else
                       i=-100
                       i+=7; // 控制光效移动速度
                 }
                    curCanvas = curCanvas === 'a' ? 'b' : 'a'; // 切换画布
                    return canvas;
                }, false),
                repeat: new Cesium.Cartesian2(1.0, 1.0),
                transparent: true,
                color: Cesium.Color.fromCssColorString(colori).withAlpha(0.7)
            })

 其中：light2是一张图片，如下：

光焰效果如下：

 

 

 

 

最后添加到viewer中上去就好了：

this.viewer.entities.add({
                name : 'line',
                polyline : {
                    positions : Cesium.Cartesian3.fromDegreesArrayHeights([116.90, 23.51, 10, 117.81, 25.21, 15, 117.56, 25.58, 56]),
                    width : 3,
                    material : Material
                }
            });

 

 

 

 

钻研不易，转载请注明出处、、、、、