cesium,不想拖动地图,只想改变视角的实现

今天遇到这么个需求,本来以为可以通过cesium禁用掉部分属性就能简单搞定,没想到尝试过后并不太行,它的拖动地图和拖动视角是绑定在一起的,当你mousedown时点击位置选中地形就会拖动地图,选到天空盒就是拖动视角,无奈只能全部禁用重新写一个控制器

实现比较简单,但我最开始的设想很复杂,浪费了很多时间,所以在这里碎碎念发泄一下

多的不说,直接上代码

const setReviewViewAction = (viewer = reviewViewer, Cesium = window.Cesium) => { let isDragging = false; let lastPosition: Cartesian2

ini 复制代码
// 鼠标按下事件
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(() => {
    isDragging = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

// 鼠标移动事件
handler.setInputAction((movement: {startPosition: Cartesian2, endPosition: Cartesian2}) => {
    if (!isDragging) return;
    if(!lastPosition) {
        //防止获取不到startPostion
        lastPosition = movement.startPosition
        return
    }
    const curPosition = movement.endPosition

    const x = (curPosition.x - lastPosition.x) * 0.005
    const y = (curPosition.y - lastPosition.y) * 0.005

    let heading = viewer.camera.heading + x
    let pitch = viewer.camera.pitch + y
    // 设置最大值和最小值
    heading = heading > 2*Math.PI ? heading - 2*Math.PI : heading < 0 ? 2*Math.PI + heading : heading
    pitch = pitch > Math.PI/2 ? Math.PI/2 : pitch < -Math.PI/2 ? -Math.PI/2 : pitch

    viewer.camera.setView({
        destination:viewer.camera.position,
        orientation: {
            heading ,
            pitch,
            roll: viewer.camera.roll
        }
    })
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// 鼠标释放事件
handler.setInputAction(() => {
    isDragging = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

}

相关推荐
&白帝&3 小时前
前端实现截图的几种方法
前端
动能小子ohhh3 小时前
html实现登录与注册功能案例(不写死且只使用js)
开发语言·前端·javascript·python·html
小小小小宇3 小时前
大文件断点续传笔记
前端
Jimmy4 小时前
理解 React Context API: 实用指南
前端·javascript·react.js
保持学习ing4 小时前
SpringBoot电脑商城项目--显示勾选+确认订单页收货地址
java·前端·spring boot·后端·交互·jquery
李明一.5 小时前
Java 全栈开发学习:从后端基石到前端灵动的成长之路
java·前端·学习
观默5 小时前
我用AI造了个“懂我家娃”的育儿助手
前端·人工智能·产品
crary,记忆5 小时前
微前端MFE:(React 与 Angular)框架之间的通信方式
前端·javascript·学习·react.js·angular
星空寻流年5 小时前
javaScirpt学习第七章(数组)-第一部分
前端·javascript·学习
烛阴6 小时前
Python多进程开发实战:轻松突破GIL瓶颈
前端·python