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

}

相关推荐
TE-茶叶蛋11 分钟前
React-props
前端·javascript·react.js
安分小尧11 分钟前
[特殊字符] 超强 Web React版 PDF 阅读器!支持分页、缩放、旋转、全屏、懒加载、缩略图!
前端·javascript·react.js
EndingCoder13 分钟前
React从基础入门到高级实战:React 高级主题 - React Concurrent 特性:深入探索与实践指南
前端·javascript·react.js·前端框架
EndingCoder14 分钟前
React从基础入门到高级实战:React 生态与工具 - React Query:异步状态管理
前端·javascript·react.js·前端框架
TE-茶叶蛋16 分钟前
ReactJS 中的 JSX工作原理
前端·react.js·前端框架
水煮白菜王16 分钟前
React 编译器
前端·react.js·前端框架
霸王蟹16 分钟前
React 项目中封装 Excel 导入导出组件:技术分享与实践
前端·笔记·学习·react.js·typescript·excel·vite
wl_17 分钟前
react-color-palette源码解析
前端·react.js·调色板
集成显卡22 分钟前
图片压缩工具 | Electron+Vue3+Rsbuild开发桌面应用
前端·javascript·electron·vue
赵庆明老师26 分钟前
webpack打包基本配置
前端·webpack·node.js