SuperMap iClient3D for WebGL动态围墙

作者：kele

前言

在三维场景中，往往会表达各种地物的范围，传统的地物范围表达方式一般是通过线、面来框选。下面小编为大家介绍一种动态围墙效果，这种效果不仅美观，还具有科技感，下面就随小编一起来看看具体的实现过程吧。

一、接口介绍

动态围墙，顾名思义，我们可以将其分解为：动态、围墙；动态可通过 CallbackProperty 接口实现，围墙可通过 entity 中 wall 墙体实现。

实现思路是给 wall 墙体设置颜色或者贴图，再通过 CallbackProperty 改变 wall 墙体的高度和颜色透明度，从而实现动态效果。

二、数据准备

为了更好的体现呼吸灯效果，我们先准备一张白色透明渐变的图片。（文章中不好展示该图片的透明效果，需要该图片的同学可以在下方下载地址中获取）

三、实现代码

1.渐变动态墙

			var alp = 1;
            var num = 0;
            var potArray = [
                13.05031865550447, 47.812187393106456, 70.6962304963392,
                13.05026182167556, 47.81203630616565, 70.58982752151557,
                13.050453287479046, 47.810942622245186, 71.07134093994152,
                13.050714203273886, 47.810863217959216, 71.4117205658598,
                13.051952746711677, 47.810976828489196, 71.36621176701277,
                13.05210954743894, 47.8112027994732, 71.30976141897918,
                13.051904366898064, 47.81217233581424, 71.6409100822583,
                13.051466954493867, 47.812139722439476, 71.6390928345167,
                13.051323812796978, 47.81220843112892, 71.304461266557,
                13.05092971523208, 47.812218862712186, 70.84528725300123,
                13.050324637172688, 47.812186158344055, 70.72814131448449
            ];
            var minHeights = [];
            var maxHeights = [];
            for(var i=0;i<potArray.length/3;i++){
                minHeights.push(potArray[i*3+2])
            }
            for(var i=0;i<potArray.length/3;i++){
                maxHeights.push(potArray[i*3+2]+30)
            }
            var fenceEntity = viewer.entities.add({
                wall: {
                    positions: new Cesium.Cartesian3.fromDegreesArrayHeights(potArray),
                    minimumHeights: minHeights,
                    maximumHeights: maxHeights,
                    material: new Cesium.ImageMaterialProperty({
                        image: "./images/jb02.png",
                        transparent: true,
                        color: new Cesium.CallbackProperty(function () {
                            if ((num % 2) === 0) {
                                alp -= 0.005;
                            } else {
                                alp += 0.005;
                            }
                            if (alp <= 0.3) {
                                num++;
                            } else if (alp >= 1) {
                                num++;
                            }
                            return Cesium.Color.RED.withAlpha(alp)
                            //entity的颜色透明 并不影响材质，并且 entity也会透明
                        }, false)
                    })
                }
            });

2.拉伸动态墙

			var potArray = [
                13.051967233970341, 47.81089255642292, 72.08332586828111,
                13.050700061263028, 47.81075393245628, 71.52107906302965,
                13.050562679344228, 47.810528373676526, 71.25547171855483,
                13.050786459146732, 47.80963299474407, 71.59896948713342,
                13.05180844751525, 47.80967256226586, 72.56644741906766,
                13.052024971245919, 47.80955391346787, 72.85782644946109,
                13.05254720397063, 47.80962114855867, 72.29263927530239,
                13.052320175103858, 47.81029640120709, 72.28511806237323,
                13.05226313045753, 47.8106543522523, 71.47843189113927,
                13.05202205446265, 47.81088903647413, 72.29800144284266
            ];
            var minHeights = [];
            var maxHeights = [];
            var minH2 = [];
            var minH3 = [];
            for(var i=0;i<potArray.length/3;i++){
                minHeights.push(Math.floor(potArray[i*3+2]));
                if(minH2[i-1] && Math.floor(potArray[i*3+2])!==minH2[i-1]){
                    minH2[i] = minH2[i-1];
                }else{
                    minH2[i] = Math.floor(potArray[i*3+2])
                }
            }
            for(var i=0;i<potArray.length/3;i++){
                maxHeights.push(potArray[i*3+2]+20)
            }
            var wall_2 = viewer.entities.add({
                wall: {
                    positions: new Cesium.Cartesian3.fromDegreesArrayHeights(potArray),
                    minimumHeights: minHeights,
                    maximumHeights: maxHeights,
                    material: Cesium.Color.YELLOW.withAlpha(0.3)
                }
            });
            var wall_3 = viewer.entities.add({
                wall: {
                    positions: new Cesium.Cartesian3.fromDegreesArrayHeights(potArray),
                    minimumHeights: minHeights,
                    maximumHeights:
                        new Cesium.CallbackProperty(function () {
                        for(var i=0;i<minH2.length;i++){
                            minH2[i] += 0.1;
                            if(minH2[i]>=92){
                                minH2[i] = 72;
                            }
                        }
                        return minH2;
                    },false),
                    material: Cesium.Color.YELLOW.withAlpha(0.5)
                }
            });

四、效果图

demo下载地址：链接：https://pan.baidu.com/s/1OX4yBRQYgqxW30YO3cIf4g
提取码：nceu