【cesium-2】Cesium相机系统

相机系统有setView、flyTo、lookAt、viewBoundingsphere等方法,下面是相关的使用方法。

flyTo具有空中飞行逐步切换视域的效果,还可设置飞行时间;

setView方法可直接切换相机视口,从而不需要通过一个飞入的效果切换;

lookAt方法在定位后会锁定位置,无法使用鼠标中键改变视角;

viewboundingsphere方法,和setView方法一样,没有一个飞入切换效果,它和setView的不同点在于它可以给定一个指定的目标点,可以从多个角度观测事物。

1、setView方法

<script type="module">
     const viewer = new Cesium.Viewer('cesiumContainer',{
         animation:false,
         timeline:false
     const position= Cesium.Cartesian3.fromDegrees(116.38,39.9,1500);
     viewer.camera.setView({
     //设置坐标
     destination:position,
     //设置视口方向
     orientation: {
         //当值为0,沿着Y轴旋转,方向为正北方向
         heading:Cesium.Math.toRadians(0),
         //控制视口的上下旋转,即X轴旋转,-90代表俯视地面
         pitch:Cesium.Math.toRadians(-90),
         //控制视口的翻转角度,即Z轴旋转
         roll:0
     },
     });
 </script>

2、flyTo方法

<script type="module">
     const viewer = new Cesium.Viewer('cesiumContainer',{
         animation:false,
         timeline:false
     const position= Cesium.Cartesian3.fromDegrees(116.38,39.9,1500);
     viewer.camera.flyTo({
     destination:position,
     orientation: {
         heading:Cesium.Math.toRadians(0),
         pitch:Cesium.Math.toRadians(-90),
         roll:0
     },
     duration:5 //设置飞行时间,单位为秒
     });
 </script>

3、lookAt方法

<script type="module">
     const viewer = new Cesium.Viewer('cesiumContainer',{
         animation:false,
         timeline:false
     });
     // 设置相机的方位,只需要设置经度和纬度
     const center = Cesium.Cartesian3.fromDegrees(116.39,39.91);
     // 设置水平旋转视口方向的角度
     const heading = Cesium.Math.toRadians(50);
     // 设置垂直旋转视口方向的角度
     const pitch = Cesium.Math.toRadians(-90);
     // 设置距离目标点的距离
     const range = 2500;
     // 第一个是目标位置信息,第二个是视口方向信息​ 
     viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
 </script>

4、viewboundingsphere方法

<script type="module">
     const viewer = new Cesium.Viewer('cesiumContainer',{
         animation:false,
         timeline:false
     });
       
     const position= Cesium.Cartesian3.fromDegrees(116.38,39.9,1500);
     //headingPitchRollQuaternion中有两个参数,分别是位置信息和旋转角度信息(垂直旋转,反转角度均为0)   
     var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRange(-90,0,0));
     //var modelGLB = '';
     var entity = viewer.entities.add({
         //name:'../testdata/Cesium_Air.glb' ,
         position:position,
         orientation:orientation,
         // 存储模型信息
         model:{
             // 设置模型信息
             uri:"../testdata/Cesium_Air.glb",
             // 设置模型最小缩放信息
             minimunPixelSize:100,
             // 设置模型缩放最大比例
             maximunScale:10000,
             // 设置模型是否显示
             show:true
         }
     })
     // 使用BoundingSphere方法,第一个变量是位置信息,第二个是物体与我们的距离信息
     // viewboundingsphere的第二个参数设置的是相机视口朝向信息,我们使用的是HeadingPitchRollQuaternion
     viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0))
 </script>

相关推荐

  1. cesium-2Cesium相机系统

    2023-12-23 06:52:02       43 阅读
  2. cesium学习6-相机camera

    2023-12-23 06:52:02       6 阅读
  3. cesium键盘控制相机位置和姿态

    2023-12-23 06:52:02       10 阅读
  4. Cesium】根据相机距离隐藏或显示模型

    2023-12-23 06:52:02       20 阅读
  5. Cesium之home键开关及相机位置设置

    2023-12-23 06:52:02       14 阅读
  6. Cesium.js相关官网或博客

    2023-12-23 06:52:02       34 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-23 06:52:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-23 06:52:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-23 06:52:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-23 06:52:02       18 阅读

热门阅读

  1. R-列表、矩阵、数组转化为向量

    2023-12-23 06:52:02       40 阅读
  2. 【数据分析】数据指标的分类及应用场景

    2023-12-23 06:52:02       38 阅读
  3. RabbitMQ消息确认机制

    2023-12-23 06:52:02       41 阅读
  4. Node.js —— EventEmitter

    2023-12-23 06:52:02       41 阅读
  5. uniapp 统一获取授权提示和48小时间隔授权

    2023-12-23 06:52:02       34 阅读