『Cesium 基础』entity面渐隐渐现效果（十六）

展示效果

 

 

 

主要思路

主要是通过entity的逐层叠加/逐层删减来实现的效果，那有小伙伴就要说了，直接更改entity的color不就好了？我也尝试过直接更改color，但实际效果并不理想，每次更换color的时候都会出现一次闪烁的情况，所以在此基础上做了一些改动。

过程讲解

首先需要定义几个全局变量：透明度a，entity的ID，透明度变化次数

var a = 0.0,      //初始透明度a，  num =0,           //初始entity  ID为0    changnum = 5;     //变化次数

然后在场景中绘制一个entity的polygon，赋予颜色。为了是颜色作为一个变量，所以最好是单独写在外面。

 var color = new Cesium.Color(0.0, 0.0, 1.0, a);    //设置为蓝色，透明度为变量        entity = viewer.entities.add({            id: num,            polygon: {                hierarchy: Cesium.Cartesian3.fromDegreesArray([                    115.00769546779887, 39.00948953601627,                    115.01061031637882, 39.01040583624218,                    115.01127283211821, 39.00875368295838,                    115.00837238000206, 39.0079302039017                ]),            height: 105,            material: color,            outline: true,            outlineColor: Cesium.Color.RED,            outlineWidth: 50            }        });

接下来就是改变颜色的function了，为了让他每隔一段时间改变一次，采用定时器的功能

function ChangeColoradd(viewer,color){       var timesRun = 0;       var interval=window.setInterval(function(){           timesRun += 1;           changeadd(viewer,color);           if(timesRun === changnum) {                        //执行十次，透明度由0-1               clearInterval(interval);           }           }, 500);                     //每隔0.5s执行一次    }

然后执行定时器里面的function，开始叠加entity，每叠加一层，透明度就变高一些

function changeadd(viewer,color) {        a += 0.1;      //每次透明度增加0.1        color.alpha=a;        entity = viewer.entities.add({            id: num+1.0,  //新添加entity对应的id累计+1            polygon: {                hierarchy: Cesium.Cartesian3.fromDegreesArray([                    115.00769546779887, 39.00948953601627,                    115.01061031637882, 39.01040583624218,                    115.01127283211821, 39.00875368295838,                    115.00837238000206, 39.0079302039017                ]),                height: 105,                material: color,                outline: true,                outlineColor: Cesium.Color.RED,                outlineWidth: 50            }        });     }

这样一来，透明度由0-0.5的效果就做好了，如果想要实现由0-0.5再从0.5-0的效果，写一个if语句，然后一个一个entity地删除就搞定了。

完整代码

var a = 0.0,num =0;         //初始透明度a，初始entity  ID为0    var changnum = 5;           //变化次数    function onload(Cesium) {
        var viewer = new Cesium.Viewer('cesiumContainer');        var scene = viewer.scene;        scene.camera.setView({            destination: Cesium.Cartesian3.fromDegrees(115.000225758308630, 39.009956534844858, 500),            orientation: {                heading: 1.705646,                pitch: -0.499956,                roll: 0.000000            }        });
        var color = new Cesium.Color(0.0, 0.0, 1.0, a);        entity = viewer.entities.add({            id: num,            polygon: {                hierarchy: Cesium.Cartesian3.fromDegreesArray([                    115.00769546779887, 39.00948953601627,                    115.01061031637882, 39.01040583624218,                    115.01127283211821, 39.00875368295838,                    115.00837238000206, 39.0079302039017                ]),            height: 105,            material: color,            outline: true,            outlineColor: Cesium.Color.RED,            outlineWidth: 50            }        });
        ChangeColoradd(viewer,color);
    }   function ChangeColoradd(viewer,color){       var timesRun = 0;       var interval=window.setInterval(function(){           timesRun += 1;           changeadd(viewer,color);           if(timesRun === changnum) {                        //执行十次，透明度由0-1               clearInterval(interval);           }           }, 500);                     //每隔0.5s执行一次    }
    function changeadd(viewer,color) {
        a += 0.1;        color.alpha=a;        console.log(color);        entity = viewer.entities.add({            id: num+1.0,            polygon: {                hierarchy: Cesium.Cartesian3.fromDegreesArray([                    115.00769546779887, 39.00948953601627,                    115.01061031637882, 39.01040583624218,                    115.01127283211821, 39.00875368295838,                    115.00837238000206, 39.0079302039017                ]),                height: 105,                material: color,                outline: true,                outlineColor: Cesium.Color.RED,                outlineWidth: 50            }        });        num += 1.0;        console.log(num);        if(num==changnum){            console.log(viewer);            ChangeColorremove(viewer,color);        }
    }

    function ChangeColorremove(viewer){        var timesRun = 0;        var interval=window.setInterval(function(){            timesRun += 1;            changeremove(viewer);            if(timesRun === changnum) {                        //执行十次，透明度由1-0                clearInterval(interval);            }        }, 500);    }

    function changeremove(viewer) {        viewer.entities.removeById(num);        num = num -1;    }