【Cesium创造属于你的地球】相机系统

相机系统里面有setView,flyTo,lookAt,viewBoundingsphere这几种方法,以下是相关的使用方法,学起来!!!

setView

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

javascript 复制代码
viewer.camera.setView({
// 设置坐标
  destination:position,
   // 设置视口方向
  orientation: {
    // 当值为0时,沿着Y轴旋转,方向为正北方向
     heading: Cesium.Math.toRadians(0),
     // pitch控制视口的上下旋转,也就是X轴旋转,当数值为-90的话,就是俯视地面的
    pitch: Cesium.Math.toRadians(-90),
    // roll控制视口的翻转角度,也就是Z轴旋转
    roll: 0
  }
})

flyTo

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

javascript 复制代码
viewer.camera.flyTo({
 // 设置坐标
  destination:position,
  // 设置视口方向
  orientation: {
    // 当值为0时,沿着Y轴旋转,方向为正北方向
    heading: Cesium.Math.toRadians(0),
    // pitch控制视口的上下旋转,也就是X轴旋转,当数值为-90的话,就是俯视地面的
     pitch: Cesium.Math.toRadians(-90),
     // roll控制视口的翻转角度,也就是Z轴旋转
    roll: 0

   },
   duration: 10
 })

lookAt

方法使用,lookAt方法一般适用于锁定某个目标场景的位置

javascript 复制代码
// lookAt方法使用,lookAt方法一般适用于锁定某个目标场景的位置

// 设置相机的方位,只需要设置经度和纬度

const center = Cesium.Cartesian3.fromDegrees(116, 39);
// 设置水平旋转视口方向的角度

 const heading = Cesium.Math.toRadians(50);
 // 设置垂直旋转视口方向的角度

const pitch = Cesium.Math.toRadians(-30);
// 设置距离目标点的距离
const range = 1000;
// // 使用lookAt方法​// 凉哥参数,第一个是目标位置信息,第二个是视口方向信息​ viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading,pitch,range))
javascript 复制代码
 /** viewboundingsphere方法,和setView方法一样,没有一个飞入切换效果,它和setView的不同点在于它可以给定一个指定的目标点,可以从那个多个角度观测事物为了更好的来展现viewboundingsphere的效果,我们可以使用entity的方法来加载一个飞机模型,供我们观测headingPitchRollQuaternion中有两个参数,分别是位置信息和旋转角度信息(垂直旋转,反转角度均为0)
    **/
   var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRange(-90,0,0))
    var modelGLB = ''

var entity = viewer.entities.add({

      name:'../Apps/SampleData/models/CesiumAir/Cesium_Air.glb' ,

      position:position,

      orientation:orientation,
      // 存储模型信息
      model:{

        // 设置模型信息
        uri:'../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',

       // 设置模型最小缩放信息

       minimunPixelSize:100,

       // 设置模型缩放最大比例

       maximunScale:10000,

       // 设置模型是否显示
     show:true

     }
})
  // 使用viewboundingsphere方法

  // 使用BoundingSphere方法,第一个变量是位置信息,第二个是物体与我们的距离信息

  // viewboundingsphere的第二个参数设置的是相机视口朝向信息,我们使用的是HeadingPitchRollQuaternion

viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0))

写在最后

好啦今天的cesium小知识就到这里啦,最后祝大家十一快乐,也祝祖国母亲繁荣昌盛💪🏻

相关推荐
八号当铺19 小时前
使用 Figma Agent Kit:插件 + MCP + 还原 Skill,打通本地设计协作
前端·人工智能·ai编程
一心只读圣贤书19 小时前
AI 辅助前端国际化实践:从文案梳理到多语言资源治理
前端
无责任此方_修行中19 小时前
搓了一个国产大模型与 AI Agent 比价工具
前端·后端·ai编程
szephyr20 小时前
腾讯云 ADP 智能体的 Skills 配置变更后没有走灰度,直接全量替换出了问题怎么定位?
java·前端·腾讯云·腾讯云adp
夏雪coding20 小时前
nginx SPA 回落把 CSS 变成了 HTML:一个返回 200 却让样式失效的坑
前端·nginx
光影少年20 小时前
React Native网络、存储与原生能力
前端·react native·react.js
bonibabi20 小时前
基于 CopilotKit + Java SSE 构建 AI Agent 的前端实践指南
前端·agent
砺能20 小时前
谷歌浏览器中出现部分字体乱码问题
前端
To_OC20 小时前
绕开层层 props 搬运:我把 useContext 和自定义 Hook 跑通了
前端·react.js·前端框架
北凉温华20 小时前
Vue3 可视化打印设计插件|拖拽生成票据/标签打印模板(开源体验版)
前端