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