cesium-动效弹窗- （一）环形旋转实现

源码参照

https://www.wellyyss.cn/ysCesium/views/index.html

最终效果图

首先实现底部环形旋转

实现原理为添加一个圆，用一张只有一段的环形图作为其材质，通过回调函数，不断重置纹理坐标的旋转角度即可。

所用图片：

 

完整代码：

//取消双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//设置homebutton的位置
Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
    Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56); //Rectangle(west, south, east, north)

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(117.21579, 31.80749, 1500.0),
    orientation: {
        heading: Cesium.Math.toRadians(20.0), //左右摆
        pitch: Cesium.Math.toRadians(-35.0), //正俯视
        roll: 0.0
    }
});

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(e) {
    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);   //获取相机高度
    if (cartesian) {
        /** main */
        var data = {
            layerId: "layer1", //弹窗的唯一id，英文，且唯一,内部entity会用得到
            lon: lon,
            lat: lat,
            addEntity: true, //默认为false,如果为false的话就不添加实体，后面的实体属性就不需要了
            boxHeight: 150, //中间立方体的高度
            boxHeightDif: 5, //中间立方体的高度增长差值，越大增长越快
            boxHeightMax: 300, //中间立方体的最大高度
            boxSide: 40, //立方体的边长
            boxMaterial: Cesium.Color.DEEPSKYBLUE.withAlpha(0.5),
            circleSize: 200, //大圆的大小，小圆的大小默认为一半
        };
        var s1 = 0.001,
            s2 = s1
        let sStartFlog=false
        setTimeout(function() {
            console.log("延迟开放加载标志")
            sStartFlog = true;
        }, 70);
        var rotation = Cesium.Math.toRadians(30);
        function getRotationValue() {
            rotation += 0.05;
            return rotation;
        }

        viewer.entities.removeById(data.layerId + "_2");
        //添加底座一 外环
        viewer.entities.add({
            id: data.layerId + "_2",
            name: "椭圆",
            position: Cesium.Cartesian3.fromDegrees(lon, lat),
            ellipse: {
                // semiMinorAxis :data.circleSize, //直接这个大小 会有一个闪白的材质 因为cesium材质默认是白色 所以我们先将大小设置为0
                // semiMajorAxis : data.circleSize,
                semiMinorAxis: new Cesium.CallbackProperty(function() {
                    if (sStartFlog) {
                        s1 = s1 + data.circleSize / 20;
                        if (s1 >= data.circleSize) {
                            s1 = data.circleSize;
                        }
                    }
                    return s1;
                }, false),
                semiMajorAxis: new Cesium.CallbackProperty(function() {
                    if (sStartFlog) {
                        s2 = s2 + data.circleSize / 20;
                        if (s2 >= data.circleSize) {
                            s2 = data.circleSize;
                        }
                    }
                    return s2;
                }, false),
                material: "./circle2.png",
                //rotation: new Cesium.CallbackProperty(getRotationValue, false),
                stRotation: new Cesium.CallbackProperty(getRotationValue, false),
                zIndex: 2,
            }
        });


        /** main */
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);