cesium+ionic4移动端双击旋转

本文介绍了如何在Cesium.js与Ionic 4的移动应用中结合使用,实现实体标记点的双击旋转功能,并提供了一个详细的步骤,包括鼠标事件处理、场景选择和相机控制。通过实例展示了如何利用Cesium的zoomTo方法配合屏幕空间事件处理,实现流畅的旋转交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

cesium+ionic4移动端双击旋转

  • this.viewer.zoomTo(entity, offset);绕实体标记点旋转
rotateHandle() {
        let entity: any
        let clickNum = 0
        let viewer = this.viewer
        let rotateShow: boolean = true
        this.mouseHandler.setInputAction((movement) => {
            clickNum += 1
            clearTimeout(this.timer);

            setTimeout(function () {
                clickNum = 0
            }, 200)
            if (clickNum == 2) {
                rotateShow = !rotateShow
                if(!rotateShow){
                    let imgUrl = "assets/img/mark-transparent.svg"
                    let position = this.viewer.scene.pickPosition(movement.position) //笛卡尔3
                    entity = this.viewer.entities.add({
                        position: position,
                        billboard: {
                            image: imgUrl,
                            // scale: 1,
                            scaleByDistance: new Cesium.NearFarScalar(2000,0.5, 8000, 0),
                            disableDepthTestDistance : Number.POSITIVE_INFINITY,
                        },
                    });
                }
                console.log('movement', movement);
                let rotate = ()=> {
                    this.heading += 1;
                    let  offset = new Cesium.HeadingPitchRange(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(-30), 1000);
                    this.viewer.zoomTo(entity, offset);
                    this.viewer.scene.screenSpaceCameraController.enableInputs = true;

                    if (rotateShow) {
                        viewer.clock.onTick.removeEventListener(rotate);

                        viewer.scene.screenSpaceCameraController.enableInputs = true
                        clickNum = 0
                        this.viewer.entities.remove(entity)
                    }
                }
                if (!rotateShow) {
                    this.viewer.clock.onTick.addEventListener(rotate)
                    clickNum = 0
                    clearTimeout(this.timer);
                    
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    }
  •  viewer.scene.camera.setView根据相机的视角进行旋转
rotateHandle1() {
        let viewer = this.viewer;
        let clickNum = 0
        let rotateShow = true;

        // 相机看点的角度,如果大于0那么则是从地底往上看,所以要为负值,这里取-30度
        var pitch = Cesium.Math.toRadians(-30);
        // 给定飞行一周所需时间,比如10s, 那么每秒转动度数
        var angle = 360 / 10;
        // 给定相机距离点多少距离飞行,这里取值为5000m
        var distance = 300; // 当前相机高度
        var startTime = Cesium.JulianDate.fromDate(new Date());

        var stopTime = Cesium.JulianDate.addSeconds(startTime, 10, new Cesium.JulianDate());

        viewer.clock.startTime = startTime.clone();  // 开始时间
        viewer.clock.stopTime = stopTime.clone();     // 结速时间
        viewer.clock.currentTime = startTime.clone(); // 当前时间
        viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
        viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
        // 相机的当前heading
        var initialHeading = viewer.camera.heading;

        this.mouseHandler.setInputAction((movement) => {

            clickNum += 1
            console.log(clickNum);
            clearTimeout(this.timer);

            setTimeout(function () {
                clickNum = 0
            }, 200)
            if (clickNum == 2) {
                rotateShow = !rotateShow
                let position = this.viewer.scene.pickPosition(movement.position)
                console.log('movement', movement);
                var Exection = function TimeExecution() {
                    // 当前已经过去的时间,单位s
                    var delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
                    var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
                    viewer.scene.camera.setView({
                        destination: position, // 点的坐标
                        orientation: {
                            heading: heading,
                            pitch: pitch,
                        }
                    });
                    viewer.scene.camera.moveBackward(distance);
                    console.log('rotateShow', rotateShow);

                    if (rotateShow) {
                        viewer.clock.onTick.removeEventListener(Exection);
                        clickNum = 0
                    }
                }
                if (!rotateShow) {
                    viewer.clock.onTick.addEventListener(Exection);
                    clickNum = 0
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    }
  • 相机的视角进行旋转一周
rotateHandle1() {
        let viewer = this.viewer;
        let clickNum = 0
        let rotateShow = true;

        // 相机看点的角度,如果大于0那么则是从地底往上看,所以要为负值,这里取-30度
        var pitch = Cesium.Math.toRadians(-30);
        // 给定飞行一周所需时间,比如10s, 那么每秒转动度数
        var angle = 360 / 10;
        // 给定相机距离点多少距离飞行,这里取值为5000m
        var distance = 300; // 当前相机高度
        var startTime = Cesium.JulianDate.fromDate(new Date());

        var stopTime = Cesium.JulianDate.addSeconds(startTime, 10, new Cesium.JulianDate());

        viewer.clock.startTime = startTime.clone();  // 开始时间
        viewer.clock.stopTime = stopTime.clone();     // 结速时间
        viewer.clock.currentTime = startTime.clone(); // 当前时间
        viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 行为方式
        viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 时钟设置为当前系统时间; 忽略所有其他设置。
        // 相机的当前heading
        var initialHeading = viewer.camera.heading;

        this.mouseHandler.setInputAction((movement) => {

            clickNum += 1
            console.log(clickNum);
            clearTimeout(this.timer);

            setTimeout(function () {
                clickNum = 0
            }, 200)
            if (clickNum == 2) {
                rotateShow = !rotateShow
                let position = this.viewer.scene.pickPosition(movement.position)
                console.log('movement', movement);
                var Exection = function TimeExecution() {
                    // 当前已经过去的时间,单位s
                    var delTime = Cesium.JulianDate.secondsDifference(viewer.clock.currentTime, viewer.clock.startTime);
                    var heading = Cesium.Math.toRadians(delTime * angle) + initialHeading;
                    viewer.scene.camera.setView({
                        destination: position, // 点的坐标
                        orientation: {
                            heading: heading,
                            pitch: pitch,
                        }
                    });
                    viewer.scene.camera.moveBackward(distance);
                    if (Cesium.JulianDate.compare(viewer.clock.currentTime, viewer.clock.stopTime) >= 0) {
                        viewer.clock.onTick.removeEventListener(Exection);
                        clickNum = 0
                    }
                    //console.log('rotateShow', rotateShow);

                    //if (rotateShow) {
                    //  viewer.clock.onTick.removeEventListener(Exection);
                    //   clickNum = 0
                   //}
                }
                if (!rotateShow) {
                    viewer.clock.onTick.addEventListener(Exection);
                    clickNum = 0
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    }

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值