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

发布了246 篇原创文章 · 获赞 36 · 访问量 14万+
展开阅读全文

大分辨率(12800*3540)的屏幕在chorme使用Cesium时发生报错,求帮助。

01-19

## 首先感谢点进来的大佬们! 在使用Cesium时遇到一个问题,就是当我在大分辨率(12800*3540)的屏幕上使用Cesium时会出现报错的情况,下面是具体的报错信息: ``` TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'. ``` 在网上查询过相关的报错信息,尝试过解决的过程: 1、有说的比较多的一种解决方案就是打开chrome里的“使用硬件加速模式”,但是尝试过了却还是依然会发生这种错误; 2、第二种就是在chrome浏览器地址中输入chrome://flags,进去之后选择Override software rendering list 启用这个选项并且重启浏览器,但是还是没能成功的解决问题; 3、尝试过的另外一种办法是将浏览器的缩放大小放大到200%,在这种情况下运行cesium是可以成功运行的,没有出现报错的情况,而且将浏览器放得越大加载3DTile等数据就会越快,但是这始终不是一个完美的解决方案; 4、还有一种情况下cesium是不会发生错误的,那就是当浏览器窗口不是最大化的时候使用cesium,这时也不会出现这种报错情况,但是这也没办法解决根源上的问题; 5、根据目前所收集到的资料,目前猜测是因为浏览器GPU进程被撑爆所导致的,但仅仅是猜测没有办法证实,还没有找到类似的可以解决该问题的方案,不知道是否跟设备的显卡有关系,还有待考察。 **尝试解决过,但是还是没办法解决该问题。在这寻求大佬们的帮助,有知道相关情况的麻烦告诉下,感激不尽~** 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览