Cesium倾斜相机视角观察物体

先看效果:

在cesium中,我们有时需要倾斜相机视角去观察物体,如相机俯视45观察物体。

cesium的api提供了倾斜相机视角的配置,但是直接使用cesium的api不能达到我们想要的效果。

函数如下:

js 复制代码
function flyToBox() {
  let longitude = -114;
  let latitude = 40;
  let pitch = -45;
  let height = 4000;

  // 创建一个蓝色盒子
  const blueBox = viewer.entities.add({
    name: "Blue box",
    position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height / 2),
    box: {
      dimensions: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0),
      material: Cesium.Color.BLUE,
    },
  });
  
  let center = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
  // 相机飞行到指定位置
  viewer.camera.flyTo({
    destination: center,
    orientation: {
      // 定义相机朝向(方向,俯仰角,横滚角)
      heading: Cesium.Math.toRadians(360),
      pitch: Cesium.Math.toRadians(pitch),
      roll: Cesium.Math.toRadians(0),
    },
    duration: 2,
  });
}

效果如下

可以看到物体已经不在视口范围内了。

why?

原因很简单,我们看到了视野都是相机的视野。

cesium相机默认的角度(picth=-90)如下:

当配置了orientation,将相机偏移了-45度,因此物体超出了相机的视野,我们也就看不到物体了。

想要看到物体也很简单,将相机平移x距离即可。回忆一下高中的知识,在直角三角形中,已知了一个角α和边h,可以求x。即:

x = tanα * h

接下来又是另一个难题。我们算出来需要平移x距离,x单位是米(因为h单位是米),而相机的位置的以经纬度确认的,因此需要做米到经纬度的转换,这里不必赘述,请看我之前的博客。完整代码如下:

js 复制代码
function flyToBox() {
  let longitude = -114;
  let latitude = 40;
  let pitch = -45;
  let height = 4000;

  // 创建一个蓝色盒子
  const blueBox = viewer.entities.add({
    name: "Blue box",
    position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 0),
    box: {
      dimensions: new Cesium.Cartesian3(1000.0, 1000.0, 1000.0),
      material: Cesium.Color.BLUE,
    },
  });

  // 计算相机的偏移量
  let offset = tan(90 + pitch) * height * 1;
  // 向南偏移,计算新的经纬度
  let { latitude: newLat, longitude: newLon } = offsetToLatLon(
    latitude,
    longitude,
    0,
    offset
  );
  let center = Cesium.Cartesian3.fromDegrees(newLon, newLat, height);
  //   let center = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

  // 相机飞行到指定位置
  viewer.camera.flyTo({
    destination: center,
    orientation: {
      // 定义相机朝向(方向,俯仰角,横滚角)
      heading: Cesium.Math.toRadians(360),
      pitch: Cesium.Math.toRadians(pitch),
      roll: Cesium.Math.toRadians(0),
    },
    duration: 2,
  });
}

/**
 * 计算给定角度的正切值
 * 
 * @param {number} degrees 输入的角度值
 * @returns {number} 返回计算得到的正切值
 */
function tan(degrees) {
  // 将角度转换为弧度
  const angleInRadians = degrees * (Math.PI / 180);
  return Math.tan(angleInRadians);
}
相关推荐
Rubin932 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子2 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598243 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug5 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo5 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢29 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机34 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler28137 分钟前
解决setTimeout/setInterval计时不准确问题的方案
前端
sophie旭1 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
蓝易云1 小时前
Qt框架中connect()方法的ConnectionType参数使用说明 点击改变文章字体大小
linux·前端·后端