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

 

 

 

 

鑽研不易，轉載請注明出處、、、、、