SuperMap iClient3D for WebGL学习笔记（三）——entity面渐隐渐现效果

分享给大家一个通过前端去改变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;
    }

展示效果

往期链接

SuperMap iClient3D for WebGL学习笔记（一）——加载三维场景
SuperMap iClient3D for WebGL学习笔记（二）——pickEvent事件