cesium学习记录06-视图、场景与相机

一、视图（Viewer）

Viewer 是 Cesium 的最高级别的组件，它封装了很多功能，如场景（viewer.scene）、时间线、动画、相机（viewer.camera）、信息框、事件处理、实体集合（viewer.entities）、数据源管理 （viewer.dataSources）等。
Viewer 的创建通常关联到一个 HTML 元素，例如一个 div。
使用 Viewer，你可以方便地加载数据、设置时间、添加标记等。

创建Viewer实例

let viewer = new Cesium.Viewer(container, options);

container：必需，表示视图器容器元素的ID字符串或HTML元素。
options：可选，用于定制Viewer对象。有许多选项可以配置。更多选项请查看

示例代码：

// 实例化地球
    let viewerOption = {
      geocoder: false, // 地名查找,默认true
      homeButton: false, // 主页按钮，默认true
      sceneModePicker: false, //二三维切换按钮
      baseLayerPicker: false, // 地图切换控件(底图以及地形图)是否显示,默认显示true
      navigationHelpButton: false, // 问号图标，导航帮助按钮，显示默认的地图控制帮助
      // animation: false, // 动画控制，默认true .
      shouldAnimate: true, // 是否显示动画控制，默认true .
      shadows: true, // 阴影
      timeline: true, // 时间轴,默认true .
      CreditsDisplay: false, // 展示数据版权属性
      fullscreenButton: false, // 全屏按钮,默认显示true
      infoBox: true, // 点击要素之后显示的信息,默认true
      selectionIndicator: true, // 选中元素显示,默认true
      contextOptions: {
        webgl: {
          preserveDrawingBuffer: true //cesium状态下允许canvas转图片convertToImage
        }
      }
    };
  let viewer = new Cesium.Viewer("cesiumContainer", viewerOption);

主要方法（更多内容请查看）：

destroy(): 销毁viewer。
extend(): 扩展viewer。
resize(): 调整viewer的大小。
zoomTo(): 缩放视图以查看给定的对象。
flyTo(): 飞向一个对象。
forceResize(): 强制重新调整viewer的大小。

例如：

 viewer.destroy();      //销毁viewer

二、场景 (Scene)

（1）Scene 的定义和功能

Scene 是 Cesium 中 3D 地球的渲染场景，负责管理和渲染所有的图形内容，如地形、影像、3D 模型、点、线、多边形等。
它提供了对渲染过程的底层访问，包括设置环境（如天空、太阳、星星）、控制渲染效果、管理后处理等。

（2）Viewer 和 Scene 的关系

Viewer 内部持有一个 Scene 实例。当你创建一个 Viewer，它会自动为你创建一个 Scene。你可以认为 Viewer 是一个完整的应用框架，而 Scene 是其中的 3D 渲染部分。
总之，Viewer 提供了一个高级的接口，集成了很多功能，使得创建 3D 地球应用变得简单。而 Scene 则提供了对渲染的底层控制。在开发过程中，你可能大部分时间都在使用 Viewer，但当你需要对渲染进行细粒度的控制时，你会直接与 Scene 交互。

（3）添加实体的两种方法及其区别

比如；你可以使用viewer.entities.add(...)的方式向cesium中添加实体，也可以通过viewer.scene.primitives.add(...)的方式向cesium添加实体。viewer.entities 是一个实体集合（EntityCollection），它允许你添加、删除或搜索实体。当你向这个集合添加实体时，Cesium 会自动处理实体在 scene 中的渲染。所以，在代码中，实际上是在使用 viewer 的高级接口来操作实体，而不需要直接与 scene 交互。当然，如果需要进行更底层的渲染控制，那么可以直接使用 viewer.scene 来访问和操作 scene。

示例代码：

修改地球透明度

  /**
   * 修改地球透明度
   * @param {double} Alpha 透明度
   */
   changeGlobeAlpha: function(Alpha) {
    // 从场景中获取地球模型
    let globe = viewer.scene.globe;
    // 是否启用透明度功能
    globe.translucency.enabled = Alpha != 1;
    // 地球正面透明度
    globe.translucency.frontFaceAlpha = Alpha == 0 ? 0.1 : Alpha;
    // 地球背面透明度
    globe.translucency.backFaceAlpha = Alpha == 0 ? 0.1 : Alpha;
  },

示例代码：

添加场景特效之雪天效果

viewer.scene.postProcessStages.add(this.snowStage);

/**
   * 雪天效果
   */
  SnowEffect() {
    var viewer = this.viewer;
    let option = {
      snowSize: 0.01, // 雪花大小，值越大雪花越大 最好不要超过0.01
      snowSpeed: 60 // 雪花速度，值越大雪花越慢
    };
    this.snowStage = new Cesium.PostProcessStage({
      name: "czm_snow",
      fragmentShader: this.Snow(),
      uniforms: {
        snowSize: () => {
          return option.snowSize;
        },
        snowSpeed: () => {
          return option.snowSpeed;
        }
      }
    });
    viewer.scene.postProcessStages.add(this.snowStage);
  },
  /**
   * 雪天效果着色器
   * @returns {string} 着色器
   */
  Snow() {
    return "uniform sampler2D colorTexture;\n\
    varying vec2 v_textureCoordinates;\n\
    \n\
    uniform float snowSpeed;\n\
    uniform float snowSize;\n\
    float snow(vec2 uv,float scale){\n\
        float time = czm_frameNumber / snowSpeed;\n\
        float w=smoothstep(1.,0.,-uv.y*(scale/10.));\n\
        if(w<.1)return 0.;\n\
        uv+=time/scale;\n\
        uv.y+=time*2./scale;\n\
        uv.x+=sin(uv.y+time*.5)/scale;\n\
        uv*=scale;\n\
        vec2 s=floor(uv),f=fract(uv),p;\n\
        float k=3.,d;\n\
        p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;\n\
        d=length(p);\n\
        k=min(d,k);\n\
        k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\
        return k*w;\n\
    }\n\
    \n\
    void main(){\n\
        vec2 resolution = czm_viewport.zw;\n\
        vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
        vec3 finalColor=vec3(0);\n\
        float c = 0.0;\n\
        c+=snow(uv,30.)*.0;\n\
        c+=snow(uv,20.)*.0;\n\
        c+=snow(uv,15.)*.0;\n\
        c+=snow(uv,10.);\n\
        c+=snow(uv,8.);\n\
        c+=snow(uv,6.);\n\
        c+=snow(uv,5.);\n\
        finalColor=(vec3(c));\n\
        gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);\n\
        \n\
    }\n\
    ";
  },

三、相机（Camera）

Camera表示观察场景的视角。通过操作摄像机，可以控制视图的位置、方向和角度。
更多请查看

示例代码：

 //设置相机位置
    viewer.camera.setView({
      // 定义相机的目标位置(笛卡尔坐标)
      destination: {
        x: -2349785.4381783823,
        y: 4596905.031779513,
        z: 3743318.751622788
      },
      // 定义相机的方向和角度
      orientation: {
        // 相机的偏转角度（heading表示从正北开始逆时针旋转的角度。其数值是以弧度表示的。一个值为0的heading通常表示正北）
        // 偏航角（飞机向左飞还是向右飞）
        heading: 0.1015029573852555,
        // 相机的上下倾斜角度（一个负的pitch值表示相机是向下倾斜的。）
        // 俯仰角（飞机向上抬头或是向下低头）
        pitch: -0.3482370478292893,
        // 相机围绕其查看方向（或称前进方向）的旋转角度（当roll值为π/2或90°（转换为弧度）时，相机将绕其前进方向旋转90度。这意味着相机的“顶部”现在指向其右侧。）
        // 翻滚角（飞机沿前进方向轴顺时针翻转为正角度）
        roll: 0.00005029594533212389
      }
    });

Cesium中的orientation属性用于设定各种对象的方向，不仅仅是相机的方向，还包括其他实体如模型的方向。下面以飞机模型为例，当设定飞机模型的orientation，实际上是在定义飞机的朝向和姿态。想象自己在驾驶这架飞机，那么飞机的前进方向和你的视线方向在概念上是相似的，那么你的眼就相当于相机 。
飞机水平飞行：

飞机向左偏：

飞机抬头：

飞机顺时针旋转：

相机操作：

1，飞行(fly): 使相机飞向某个指定的位置。这通常是一个平滑的过渡，不仅仅是简单的位置变换。

    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(
        lon,
        lat,
        height
      ),
      duration: duration //持续时间
    });

2，缩放(zoom): 使相机向前或向后移动，从而使视野放大或缩小。

// 缩小
viewer.camera.zoomOut(500); // 向后移动500米
// 放大
viewer.camera.zoomIn(500);  // 向前移动500米

3，移动(move): 沿着地平面或其他方向移动相机，而不改变它的高度或朝向。

// 向右移动
viewer.camera.moveRight(500);  // 地面上向右移动500米

4，视角(look): 改变相机的朝向，但不改变其位置。通常用于围绕某个点旋转。

viewer.camera.look(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(-10));  // 向下看10度

5，平面扭转(twist): 改变相机的roll值，使相机绕其前进方向轴旋转。

viewer.camera.twistRight(Cesium.Math.toRadians(10));  // 顺时针扭转10度

6，3D旋转(rotate): 在三维空间中旋转相机，可以是任意方向的旋转。

viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(10));  // 绕Z轴旋转10度

7，用于将相机视角锁定到目标位置(lookAt): 设置相机的位置和朝向，以使其始终面向某个特定的点或对象。

var targetPosition = Cesium.Cartesian3.fromDegrees(103.851959, 1.290270);
viewer.camera.lookAt(targetPosition, new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_FOUR, 1500.0));

8，将地球或场景缩放到该实体的视图范围内(viewer.zoomTo()): 调整相机的位置和朝向，以最佳地查看某个特定的实体或对象文章来源地址https://www.toymoban.com/news/detail-639749.html

var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(103.851959, 1.290270),
    box: {
        dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.RED
    }
});
viewer.zoomTo(entity);

示例代码：

/**
   * 获得当前相机姿态及方位信息
   */
  GetCameraData() {
    var viewer = this.viewer;
    var dircartographic = viewer.scene.camera.positionCartographic;
    //相机姿态
    //角度转弧度：let radians=Cesium.Math.toRadians(degrees)
    //弧度转角度：let degrees=Cesium.Math.toDegrees(radians)
    var camerax = Cesium.Math.toDegrees(dircartographic.longitude).toFixed(6);
    var cameray = Cesium.Math.toDegrees(dircartographic.latitude).toFixed(6);
    var cameraz = dircartographic.height.toFixed(2);
    //相机方位
    var heading = Cesium.Math.toDegrees(viewer.scene.camera.heading);
    var pitch = Cesium.Math.toDegrees(viewer.scene.camera.pitch);
    var roll = Cesium.Math.toDegrees(viewer.scene.camera.roll);
    return {
      X: parseFloat(camerax),
      Y: parseFloat(cameray),
      Z: parseFloat(cameraz),
      heading: heading, //默认方向为正北，正角度为向东旋转，即水平旋转，也叫偏航角。值越大代表相机向右看的角度越大，值越小代表相机向左看的角度越大。
      pitch: pitch, //默认角度为-90，即朝向地面，正角度在平面之上，负角度为平面下，即上下旋转，也叫俯仰角。值越大代表相机向下看的角度越小
      roll: roll //默认旋转角度为0，左右旋转，正角度向右，负角度向左，也叫翻滚角。值越大代表相机向右倾斜的角度越大。
    };
  }

到了这里，关于cesium学习记录06-视图、场景与相机的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！