1. cesium的Viewer要素讲解

Viewer组件描述

Animation：动画器件，控制视图动画的播放速度

BaseLayerPicker：图层选择器，选择要显示的地图服务和地形服务

FullscreenButton：全屏按钮

Geocoder：查找位置工具，查找到之后会将镜头对准找到的地址

HomeButton：首页位置，点击之后将视图跳转到默认全球视角

SceneModePicker：选择视角的模式，3D，2D，2.5D 哥伦布视图

Timeline：时间轴，指示当前时间，并允许用户跳到特定的时间

NavigationHelpButton：导航帮助按钮，显示默认的地图控制帮助

CreditsDisplay：展示商标版权和数据归属

Viewer常用配置

 viewer = new Cesium.Viewer("cesiumContainer", {
  animation: false, // 是否显示动画控件
  baseLayerPicker: false, // 是否显示图层选择控件
  fullscreenButton: false, // 是否显示全屏按钮
  geocoder: false, // 是否显示位置搜索部件
  homeButton: false, // 是否显示Home按钮
  sceneModePicker: false, // 是否显示二三维切换部件
  timeline: false, // 是否显示时间线控件
  navigationHelpButton: false, // 是否显示帮助信息控件
  navigationInstructionsInitiallyVisible: false, // 导航说明显示
  vrButton: false, // vr部件
  infoBox: false, // 是否显示点击要素之后显示的信息
  scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存
  selectionIndicator: false, // 是否显示指示器组件
  // skyBox: false,  // 配置天空盒子或不显示天空盒子
  // skyAtmosphere: false, // 配置大气或不显示大气
  useDefaultRenderLoop: true, // 控制是否继续渲染
  // targetFrameRate: 30, // 控制渲染帧数
  maximumScreenSpaceError: 64, // 屏幕空间最大误差
  showRenderLoopErrors: false, // 报错是否弹出错误
  useBrowserRecommendedResolution: false, // 设置为false使用window.devicePixelRatio属性
  automaticallyTrackDataSourceClocks: false, // 设置成true，使用公共clock对象，设置false，所有功能使用独立clock对象
  contextOptions: {}, // 创建场景时，配置webgl
  sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
  // orderIndependentTranslucency: true, // 如果为true且配置支持，则使用顺序无关的透明性。
  // dataSources: new Cesium.DataSourceCollection(), // 小部件数据源设置
  resolutionScale: 1, // 清晰度 0-1
  requestRenderMode: true, // 启用请求渲染模式
  maximumRenderTimeChange: Infinity, // 最大渲染时间变化
  imageryProvider: false // 底图提供者
});

Viewer其他配置

// 显示帧数
viewer.scene.debugShowFramesPerSecond = true;

// 去除 Cesium 版权图标
viewer._cesiumWidget._creditContainer.style.display = "none"; 

// 关闭大气层显示
viewer.scene.skyAtmosphere.show = false;

// 开启地形深度检测
viewer.scene.globe.depthTestAgainstTerrain = true;

// 禁止相机进入地下
viewer.scene.globe.depthTestAgainstTerrain = true;

// 是否应预加载渲染图块的祖先。将此设置为true可优化缩小体验，并在平移时新暴露的区域。缺点是需要加载更多的图块。
viewer.scene.globe.preloadAncestors = false;

2. cesium的Scene要素讲解

Scene场景对象

包含camera 相机、globe 椭圆体（imageryLayers 底图、terrainProvider 地形）、skyBox 天空盒、sun 太阳、 moon 月亮、primitives 默认矢量数据层、postProcessStage 后期处理效果等

Scene场景渲染监听事件触发顺序

viewer.scene.preUpdate 在更新或呈现场景之前将引发的事件

viewer.Scene.postUpdate 在场景更新后以及渲染场景之前立即引发的事件

viewer.scene.preRender 在场景更新后以及渲染场景之前将引发的事件

viewer.scene.postRender 在渲染场景后立即引发的事件

3. cesium的Camera要素讲解

Camera相机控制

Camera 类（相机）描述了相机的当前状态，包括：位置（position），朝向（orientation），参考空间（reference frame），视锥体（view frustum），可以调用move*、zoom*、look*、teist*、rotate*、setView、flyTo 等方法进行控制相机操作。

ScreenSpaceCameraController 类（屏幕控件相机控制器）把屏幕空间的用户输入（鼠标拖拽点击或者触摸事件）转换为三维世界的相机移动。它包含一些属性，可以启用/禁用某种用户输入，修改惯性、最小最大缩放距离等。

Camera相机相关事件

viewer.camera.moveStart 相机开始移动时将引发的事件

viewer.camera.moveEnd 相机停止移动时将引发的事件

viewer.camera.changed 相机更改后将引发的事件

Camera基本操作方法

move* 和 zoom* 方法：沿着相机方向或者某个给定向量来平移相机的位置。相机朝向不变。

look* 和 twist* 方法：旋转相机朝向，向前向量（direction），向上向量（up），向右向量（right）都会改变。相机位置保持不变。

rotate* 方法：相对一个给定的向量，旋转相机的位置和朝向。

Camera方法示例

// 1. 设置相机位置, 直接跳转到目的地
const position1 = Cesium.Cartesian3.fromDegrees(116.46, 39.92, 1000);
viewer.camera.setView({
destination: position1,
// 默认相机位置(0, -90, 0)
orientation: {
  heading: Cesium.Math.toRadians(0), // 左右方向
  pitch: Cesium.Math.toRadians(-90), // 倾斜角度
  roll: Cesium.Math.toRadians(0) // 翻滚角度
}
});

// 2. 设置相机位置, 平滑跳转到目的地
const position2 = Cesium.Cartesian3.fromDegrees(116.46, 39.92, 2000);
  viewer.camera.flyTo({
    destination: position2,
    orientation: {
      heading: Cesium.Math.toRadians(0), // 左右方向
      pitch: Cesium.Math.toRadians(-90), // 倾斜角度
      roll: Cesium.Math.toRadians(0) // 翻滚角度
    },
    duration: 3 // 单位秒
});

// 3. 设置相机位置, 直接跳转到目的地, 位置固定在点位上
const position3 = Cesium.Cartesian3.fromDegrees(116.46, 39.92);
viewer.camera.lookAt(
    position3,
    new Cesium.HeadingPitchRange(
      Cesium.Math.toRadians(0),
      Cesium.Math.toRadians(-90),
      3000
    )
);

// 4. 放大到特定位置
const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.46, 39.92, 0),
    point: {
      pixelSize: 20,
      color: Cesium.Color.RED
    }
});
viewer.zoomTo(entity);

2.cesium场景和视图控制

1. cesium的Viewer要素讲解

2. cesium的Scene要素讲解

3. cesium的Camera要素讲解