Cesium相机系统

未名＇

已于 2022-07-30 10:10:18 修改

阅读量225

点赞数

分类专栏： Cesium 文章标签： javascript 前端

于 2022-07-29 17:22:39 首次发布

本文链接：https://blog.csdn.net/qq_43892230/article/details/126060213

版权

Cesium 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

相机系统：为了控制场景中的视域
cesium设定了默认的鼠标事件，用于和我们的相机系统进行交互
使用鼠标左键单击并进行拖动，用于移动整个地图
使用鼠标右键单击并拖动，用于放大和缩小
使用鼠标滚轮同样可以用于放大和缩小
按住滚轮的中间点进行拖动，即可围绕地球表面的点进行旋转

1.setView

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相机系统</title>
  <script src="../../lib/Cesium/Cesium.js"></script>
  <link rel="stylesheet" href="../../lib/Cesium/Widgets/widgets.css">
  <style>
    html,
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>
<body>
  <div id="yc-cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = '官网注册获取token';
    const viewer = new Cesium.Viewer('yc-cesiumContainer');

    // 设置一个常量，用于存储飞行目的地的坐标
    const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);
    // 1、setView通过定义相机飞行目的地的三维坐标和视线方向，将视角直接切换到所设定的视域范围内
    // 视角是直接切换，没有空中飞行的过程适用于快速切换视角

    viewer.camera.setView({
      // 用于设定相机的目的地
      destination:position,
      // 设定相机是口的方向
      orientation:{
        // 控制视口方向的水平旋转，也就是沿着y轴旋转,当数值为0，则代表是正北方向
        heading:Cesium.Math.toRadians(0),
        // 控制视口的上下旋转，即沿X轴进行旋转，当数值为-90，则是俯视朝向地面
        pitch:Cesium.Math.toRadians(-90),
        // 控制视口的翻滚角度，沿着z轴进行旋转，数值为0，表示不翻转
        roll:0
      }
    })
  </script>
</body>
</html>

2.flyTo

	Cesium.Ion.defaultAccessToken = '';
    const viewer = new Cesium.Viewer('yc-cesiumContainer');
    // 设置一个常量，用于存储飞行目的地的坐标
    const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);
    // 2、flyTo:具有空中飞行逐步切换视域的效果，还可以设置飞行时间
    viewer.camera.flyTo({
      destination:position,
      destination:position,
      orientation:{
        heading:Cesium.Math.toRadians(0),
        pitch:Cesium.Math.toRadians(-90),
        roll:0
      },
      // 可以设置相机的飞行时间,5s
      duration:5
    })

3.lookAt

	Cesium.Ion.defaultAccessToken = '';
    const viewer = new Cesium.Viewer('yc-cesiumContainer');
    // 设置一个常量，用于存储飞行目的地的坐标
    const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);
    // 3、lookAt:也是直接将视角跳转到设置的目的地上，但是鼠标任意旋转方向是不会改变其位置的,一般用于锁定某个场景的视角
    // 给相机的目的地设置一个位置,只需要给经度和纬度
    // const center = Cesium.Cartesian3.fromDegrees(116.39,39.91)
    // 设置一个水平旋转视口方向的角度
    const heading = Cesium.Math.toRadians(50)
    // 设置一个垂直旋转视口的角度
    const pitch = Cesium.Math.toRadians(-90)
    // 设置相机距离目标点的高度
    const range = 2500
    // 使用lookAt方法,参数：目标点位置 用Cesium的HeadingPitchRange方法设定相机方向和高度
    viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading,pitch,range))

4.viewBoundingSphere

	Cesium.Ion.defaultAccessToken = '';
    const viewer = new Cesium.Viewer('yc-cesiumContainer');
    // 4、viewBoundingSphere:没有飞行的过渡效果，而是直接切换视口到指定目的地，
    // 但是它可以给一个指定的目标点，让我们可以从多个角度更好的观测 
    // 设置一个常量，用于存储飞行目的地的坐标
    const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,1500)
    // 用一个变量存储一下模型的朝向，需要使用到headingPitchRollQuaternion方法，(位置信息，旋转角度信息)
    // 这里设定模型的垂直旋转和翻转均为0.已达到飞机飞行的效果
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90,0,0))
    // 先加载一个官方提供的飞机模型，用的viewer的entities属性并使用它的add方法
    var entity = viewer.entities.add({
      // 设定模型的位置
      position:position,
      orientation:orientation,
      // 存储模型的各种信息
      model:{
        // 模型链接(此处是uri不是url)
        uri:"../../lib/models/feiji.glb",
        // 设置模型缩放最小情况下的大小
        minimumPixelSize:100,
        // 设置模型缩放最大的比例
        maximumScale:10000,
        // show用于设置模型的显示
        show:true
      }
    })
    // (设置视点的位置(具体位置，相机的朝向)，控制我们和物体的距离)
    viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20), new Cesium.HeadingPitchRange(0,0,0))