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

整点可乐2025-05-31 10:40

今天遇到这么个需求,本来以为可以通过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);

}