Cesium入门：Viewer 知识点总结

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

Cesium Viewer 是 Cesium 开源 JavaScript 库中一个强大的工具，用于构建和展示 3D 地理空间数据和场景。它是 Cesium 中最常用的小部件，提供了一个高度定制化的 3D 地球模型，允许开发者添加各种类型的地理空间数据、控制用户交互、以及扩展其功能以适应特定的应用需求。

Cesium Viewer 的组成

Cesium Viewer 包含了以下主要组成部分：

• 3D Canvas：这是 Cesium Viewer 的核心渲染区域，用于显示 3D 场景，包括地形、建筑、纹理、模型等。
• Navigation Controls：提供用户与 3D 场景互动的工具，如平移、旋转、缩放等。
• Base Layer Picker：允许用户选择不同的底图，如卫星图像、地形图或矢量图。
• Timeline：用于控制场景的时间，可以播放历史数据或动画。
• Info Box：显示有关当前选择对象的信息。
• Home Button：一键返回到默认的视图位置和方向。
• Zoom Slider：控制场景的缩放比例。
• Split Direction Controls：用于在 2D 和 3D 视图之间切换。

初始化 Cesium Viewer

初始化 Cesium Viewer 通常涉及以下步骤：

// 获取 HTML 元素
var container = document.getElementById('cesiumContainer');

// 创建 Cesium Viewer 实例
var viewer = new Cesium.Viewer(container, {
  // 可选的配置参数
  terrainProvider : Cesium.createWorldTerrain(),
  baseLayerPicker : false, // 禁用图层选择器
  timeline : false, // 禁用时间线
  homeButton : true, // 显示首页按钮
  navigationHelpButton : false, // 禁用导航帮助按钮
  infoBox : false, // 禁用信息框
  fullscreenButton : true, // 显示全屏按钮
  geocoder : false, // 禁用地址查询
  sceneModePicker : true, // 显示场景模式选择器
  animation : true, // 显示动画控制
  imageryProvider : new Cesium.UrlTemplateImageryProvider({
    url : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
  })
});

扩展 Cesium Viewer

Cesium Viewer 可以通过混合（mixins）进行扩展，添加自定义功能或修改现有行为。你可以通过继承 Cesium.Viewer 类并覆盖某些方法来实现这一目的。

控制和事件

Cesium Viewer 提供了一系列事件和方法，允许开发者监听和控制用户的交互，如点击、双击、鼠标移动等。这些事件可以用于触发自定义逻辑，比如在用户点击地图上的某个点时弹出一个信息窗口。

性能优化

为了提高性能，Cesium Viewer 提供了多种方法来减少渲染负载，如使用 LOD（Level of Detail）来动态调整场景细节，以及使用遮挡剔除等技术来减少不必要的渲染。

总的来说，Cesium Viewer 是一个功能丰富且高度可定制的工具，非常适合用于开发复杂的地理空间应用和可视化解决方案。