cesium-动效弹窗- （二）动态entity

1 动态entity的效果之前在简书上就已经见过，但还未实际操作过，结合该例正好学习；property的使用说明

https://www.jianshu.com/p/f0b47997224c

 box有一些特殊之处，其坐标高度要指定立方体的中间高度，因为立方体在进行伸长时，是两端同时伸长

那么要设置的代码即为其中间位置不断更改。dimensions也随高度不断更改

当达到最大高度时，停止伸长

完整代码：

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(e) {
   var  s1=0.001

    var sStartFlog = false;

    var cartesian = viewer.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid);
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    var lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5); //四舍五入 小数点后保留五位
    var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5); //四舍五入  小数点后保留五位
    // var height = Math.ceil(viewer.camera.positionCartographic.height);   //获取相机高度


    var data = {
        layerId: "layer1", //弹窗的唯一id，英文，且唯一,内部entity会用得到
        lon: lon,
        lat: lat,
        addEntity: true, //默认为false,如果为false的话就不添加实体，后面的实体属性就不需要了
        boxHeight: 150, //中间立方体的高度
        boxHeightDif: 1, //中间立方体的高度增长差值，越大增长越快
        boxHeightMax: 300, //中间立方体的最大高度
        boxSide: 40, //立方体的边长
        boxMaterial: Cesium.Color.DEEPSKYBLUE.withAlpha(0.5),
        circleSize: 200, //大圆的大小，小圆的大小默认为一半
    };
    var height = data.boxHeight,
        heightMax = data.boxHeightMax,
        heightDif = data.boxHeightDif;
    var goflog = true;
    if (cartesian) {
        viewer.entities.removeById("_1");
        var blueBox = viewer.entities.add({
            id:  "_1",
            name: "立方体盒子",
            //中心的位置
            position: new Cesium.CallbackProperty(function() {
                height = height + heightDif;
                if (height >= heightMax) {
                    height = heightMax;
                }
                return Cesium.Cartesian3.fromDegrees(lon, lat, height/2)
            }, false),
            box: {
                dimensions: new Cesium.CallbackProperty(function() {
                    height = height + heightDif;
                    if (height >= heightMax) {
                        height = heightMax;
                        if (goflog) { //需要增加判断 不然它会一直执行; 导致对div的dom操作 会一直重复
                            goflog = false;
                        }
                    }
                    return new Cesium.Cartesian3(data.boxSide, data.boxSide, height)
                }, false),
                material: data.boxMaterial
            }
        });

    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);