cesium 相机绕点旋转

81 阅读1分钟

原理:保持相机的中心点不变,不断更新相机的朝向heading即可

function cameraSpin(){

// 为了方便展示效果,插个旗
let labelEntities = {
  id:'',
  name: name,
  position: Cesium.Cartesian3.fromDegrees(113.2346108772787829, 21.9464521112360380, 1300),
  label: {
    //文字标签
    text: '相机绕点旋转',
    font: "20px Arial,sans-serif",
    style: Cesium.LabelStyle.FILL,
    // 对齐方式(水平和竖直)
    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    verticalOrigin: Cesium.VerticalOrigin.CENTER,
    // eyeOffset: new Cesium.Cartesian3(10, -4, 0),
    showBackground: true,
    backgroundColor: new Cesium.Color.fromBytes(68, 117, 220, 160),
  },
}
let lineEntities = {
  polyline: {
    positions: [
      new Cesium.Cartesian3.fromDegrees(113.2346108772787829, 21.9464521112360380, 5),
      new Cesium.Cartesian3.fromDegrees(113.2346108772787829, 21.9464521112360380, 1300),
    ],
        width: 4,
        material: new Cesium.Color.fromBytes(255, 0, 0),
  },
}
viewer.entities.add(labelEntities)
viewer.entities.add(lineEntities)


  //时间轴-开始
  viewer.clock.shouldAnimate = true;
  //恢复相机的默认视角
  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
  //移除时间轴的监听器
  viewer.clock.onTick.removeEventListener(spinPoint)
  //添加时间轴的监听器
  viewer.clock.onTick.addEventListener(spinPoint)
}
//相机绕点旋转函数
/*
*  通过调整相机的heading(朝向),pitch(俯仰角),range(距离)来旋转相机,围绕一个特定的位置position进行观察
* */
function spinPoint(){
  // position 位置信息
  let position = new Cesium.Cartesian3.fromDegrees(113.2346108772787829, 21.9464521112360380, 1300);
  //heading 朝向
  let heading = viewer.camera.heading;
  //pitch 俯仰角
  let pitch = viewer.camera.pitch;
  //将相机的朝向角度增加0.2度(顺时针旋转0.2度)
  heading += Cesium.Math.toRadians(0.2);
  //角度归一化 每次调用spinPoint时heading都会增加0.2度  所以防止heading的值变得过大或者过小,需要使其处于一个合理的范围内
  if(heading >= Math.PI * 2 || heading <= -Math.PI *2){
    heading = 0;
  }
  /*
  * viewer.camera.lookAt 设置相机观察某个位置
  * 参数1 是设置目标位置
  * 参数2 是设置设置相机的朝向,俯仰角以及视距
  * */
  viewer.camera.lookAt(
      position,
      new Cesium.HeadingPitchRange(heading,pitch,5000)
  )
}
function clearCameraSpin(){
  //恢复默认视角
  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
  //移除时间轴的监听器
  viewer.clock.onTick.removeEventListener(spinPoint)
  //时间轴-结束
  viewer.clock.shouldAnimate = false;
}

GIF 2024-12-13 11-19-06.gif