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