初始化一个基于Cesium库的三维地球视图(Cesium Viewer)。viewer
变量通过调用new Cesium.Viewer()
构造函数实例化了一个Cesium Viewer对象,配置项多达40多项基本覆盖了官网,并将其挂载到HTML DOM元素cesium-container
中。
-
渲染引擎:Viewer作为Cesium框架的核心组件,负责管理和渲染三维地球视图,包括地形、影像图层、3D模型、矢量数据等。
-
交互式界面:Viewer内嵌了一系列用户界面(UI)小部件,例如动画控制器、时间线、场景模式选择器、全屏按钮等,提供了丰富的用户体验和交互操作。
-
数据集成:通过
dataSources
属性,可以轻松地加载和管理多种类型的数据源,如GeoJSON、KML、CZML、3D Tiles等格式的地理空间数据。 -
场景配置:允许开发者根据需求调整场景的各种配置,如场景模式(2D、3D或哥伦布视图)、投影方式、地形提供商、图像提供商等。
-
性能优化:通过Viewer提供的API,开发者可以控制渲染质量和性能平衡,比如启用或禁用MSAA、选择不同的渲染模式、设置渲染帧率等。
-
扩展性:尽管Viewer内置了大量功能,但它仍然是一个高度可扩展的基类,开发者可以通过混合插件(mixins)来增加额外的功能模块,满足特定的应用需求。
let viewer = new Cesium.Viewer('cesium-container', {
// UI组件相关配置
animation: false, // 是否显示动画控制器小部件,默认为true
baseLayerPicker: false, // 是否显示基础图层选择器小部件,默认为true
fullscreenButton: false, // 是否显示全屏按钮小部件,默认为true
vrButton: false, // 是否显示虚拟现实(VR)模式切换按钮,默认为false
geocoder: false, // 是否显示地理编码器小部件,默认为true
homeButton: true, // 是否显示“家”按钮(返回初始视图),默认为true
infoBox: false, // 是否显示实体信息框(鼠标悬停时显示的信息),默认为true
sceneModePicker: false, // 是否显示场景模式选择器小部件,默认为true
selectionIndicator: false, // 是否显示选取指示器小部件,默认为true
timeline: false, // 是否显示时间线小部件,默认为true
navigationHelpButton: false, // 是否显示导航帮助按钮,默认为true
navigationInstructionsInitiallyVisible: false, // 是否初始显示导航说明,默认为true
shouldAnimate: false, // 是否默认开启时钟动画,默认为false
// 场景和性能相关配置
scene3DOnly: false, // 是否强制所有内容仅以3D模式渲染以节省GPU内存,默认为false
requestRenderMode: false, // 是否启用按需渲染模式,默认为false
maximumRenderTimeChange: 0.0, // 在requestRenderMode为true时的最大帧间隔时间(秒),默认为0.0
msaaSamples: 0, // MSAA采样次数,默认为0,越高效果越好,也越吃性能
// 其他可视化效果配置
skyBox: false, // 天空盒,用于渲染星空
skyAtmosphere: new Cesium.SkyAtmosphere(), // 蓝天及地球边缘光效,默认开启
fullscreenElement: document.body, // 全屏模式下要应用的元素,默认为整个body
useDefaultRenderLoop: true, // 是否使用默认渲染循环,默认为true
targetFrameRate: undefined,// 使用默认渲染循环时的目标帧率,默认根据不同情况自动处理
showRenderLoopErrors: false, // 是否在发生渲染循环错误时显示错误提示,默认为true
useBrowserRecommendedResolution: false, // 是否遵循浏览器推荐的分辨率渲染,默认为false
automaticallyTrackDataSourceClocks: false, // 是否自动追踪数据源时钟的变化,默认为true
sceneMode: Cesium.SceneMode.SCENE3D, // 初始化场景模式,默认为3D模式
mapProjection: new Cesium.GeographicProjection(), // 在2D和Columbus View模式下使用的地图投影,默认为地理投影
orderIndependentTranslucency: false, // 是否开启顺序无关透明度,默认为true
terrainProvider: new Cesium.EllipsoidTerrainProvider(), // 默认地形图层
dataSources: new Cesium.DataSourceCollection(), // 数据源集合,默认创建一个新的数据源集合
terrainExaggeration: 1.0, // 地形夸张系数,默认为1.0(即无夸张)
shadows: false, // 是否启用阴影效果,默认为false
terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, // 地形阴影模式,默认只接收阴影
mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL, // 2D地图模式,默认为无限滚动模式
projectionPicker: false, // 是否显示投影选择器小部件,默认为false
// contextOptions: '', // 传递给Scene的WebGL上下文和创建属性
// globe: new Cesium.Globe(mapProjection.ellipsoid), // 场景中的地球仪,默认为一个标准地球仪
// clockViewModel: undefined, // 用于控制当前时间的时钟视图模型,默认根据options.clock创建
// selectedImageryProviderViewModel: undefined, // 当前基础影像图层的视图模型,仅在baseLayerPicker为true时有效
// imageryProviderViewModels: undefined, // 可供BaseLayerPicker选择的影像图层视图模型数组
// selectedTerrainProviderViewModel: undefined, // 当前基础地形图层的视图模型,仅在baseLayerPicker为true时有效
// terrainProviderViewModels: undefined, // 可供BaseLayerPicker选择的地形图层视图模型数组
// imageryProvider: Cesium.createWorldImagery(), // 默认基础影像图层,仅在baseLayerPicker为false时有效
// creditContainer: '', // 显示版权信息的DOM元素或ID,默认附加在小部件底部
// creditViewport: '', // 显示版权信息弹出窗口的DOM元素或ID,默认显示在小部件上
});