前言
本文用于Cesium初始化界面的详细配置,是对这篇 文章的延伸;内容不定时更新
一、对照表格
类别 | 频率 | 名称 | 类型 | 默认值 | 描述 |
---|---|---|---|---|---|
基础 | 高频 | sceneMode | SceneMode | SceneMode. SCENE 3 D | 初始场景模式 |
mapProjection | MapProjection | new GeographicProjection () | 2 D 和 ColumbusView 的地图投影 | ||
globe | Globe | new Globe (mapProjection. Ellipsoid) | 场景中使用的地球仪, 如果设置为 false 则不会添加地球仪 | ||
terrainProvider | TerrainProvider | new EllipsoidTerrainProvider () | 地形提供者 | ||
imageryProvider | ImageryProvider | createWorldImagery () | 要使用的影像提供者。仅当 baseLayerPicker 为 false 时生效 | ||
中频 | shadows | Boolean | false | 是否启用太阳投射的阴影 | |
terrainShadows | ShadowMode | ShadowMode. RECEIVE_ONLY | 地形是否投射或接收来自太阳的阴影 | ||
mapMode 2 D | MapMode 2 D | MapMode 2 D. INFINITE_SCROLL | 2 D 地图的模式, 旋转或者水平无限滚动 | ||
低频 | skyBox | SkyBox | 用于渲染星空的天空盒, 如果不设置则使用默认星空, 设定方法为 new Cesium.SkyBox({sources : {positiveX : 'skybox_px.png',negativeX : 'skybox_nx.png',positiveY : 'skybox_py.png',negativeY : 'skybox_ny.png',positiveZ : 'skybox_pz.png',negativeZ : 'skybox_nz.png'}}); | ||
skyAtmosphere | SkyAtmosphere | false | 显示蓝天和大气光晕效果。设置为new Cesium.SkyAtmosphere()可以开启 | ||
orderIndependentTranslucency | Boolean | true | 如果为 true 且设备支持, 则使用无序半透明模式渲染 | ||
组件 | 高频 | baseLayerPicker | Boolean | true | 是否显示底图切换组件 |
timeline | Boolean | true | 是否显示时间轴组件 | ||
中频 | animation | Boolean | true | 是否显示动画组件 | |
sceneModePicker | Boolean | true | 场景模式选择组件 | ||
homeButton | Boolean | true | 是否显示视角恢复按钮 | ||
selectionIndicator | Boolean | true | 选中指示器 | ||
infoBox | Boolean | true | 是否显示信息框 | ||
低频 | vrButton | Boolean | false | 是否显示 VR 按钮组件 | |
geocoder | (Boolean, Array. (GeocoderService)) | true | 是否显示地名查找组件 | ||
projectionPicker | Boolean | false | 是否显示投影切换组件 | ||
fullscreenButton | Boolean | true | 是否显示全屏按钮 | ||
navigationHelpButton | Boolean | true | 是否显示导航帮助按钮 | ||
navigationInstructionsInitiallyVisible | Boolean | true | 初始是否显示导航说明 | ||
性能 | 高频 | useDefaultRenderLoop | Boolean | true | 如果设置为 true, 则这个组件控制渲染循环; 如果为 false, 则不控制 |
targetFrameRate | Number | 使用默认渲染循环时的目标帧率 | |||
showRenderLoopErrors | Boolean | true | 如果为 true, 在渲染循环出错时会自动显示错误信息面板 | ||
中频 | requestRenderMode | Boolean | false | 可选, 如果为 true, 则仅在场景改变时请求渲染。这可以减少 CPU/GPU 占用, 并节省移动设备电量, 但需要使用 Scene.RequestRender ()来手动渲染帧。在改变场景后需要在许多情况下调用该函数, 请参考文章说明。 | |
maximumRenderTimeChange | Number | 0.0 | 最大时钟变化量 | ||
contextOptions | Object | 与 options 对应, 会传递给 Scene 来配置上下文和 WebGL 参数 | |||
useBrowserRecommendedResolution | Boolean | false | 如果为 true, 则按浏览器推荐的分辨率渲染, 忽略 window. DevicePixelRatio | ||
交互 | 中频 | automaticallyTrackDataSourceClocks | Boolean | true | 如果为 true, 则会自动追踪新添加的数据源的时钟设置, 并在数据源时钟变化时更新。如果要独立配置时钟, 则设置为 false |
低频 | fullscreenElement | (Element, String) | document. Body | 全屏按钮按下时将这个元素或 id 对应的元素设置为全屏 | |
creditContainer | (Element, String) | 包含 CreditDisplay 的 DOM 元素或 id, 如果不设置则显示在组件底部 | |||
creditViewport | (Element, String) | 可选, CreditDisplay 弹出窗口的 DOM 元素或 id, 如果不设置则显示在组件上方 | |||
dataSources | DataSourceCollection | new DataSourceCollection () | 组件可视化的数据源集合, 如果传入则组件不会销毁它 | ||
其他 | 中频 | terrainExaggeration | Number | 1.0 | 地形垂直夸张值, 夸张地形起伏度 |
maximumRenderTimeChange | Number | 0.0 | 可选, 如果 requestRenderMode 为 true, 则定义请求渲染前允许的最大模拟时间变化。 | ||
低频 | scene 3 DOnly | Boolean | false | 如果为 true, 则每个几何体实例仅以 3 D 模式渲染以节省 GPU 内存 | |
shouldAnimate | Boolean | false | 如果默认就播放动画, 则为 true; 否则为 false。这个选项的优先级高于 clockViewModel | ||
clockViewModel | ClockViewModel | new ClockViewModel (options. Clock) | 用于控制当前时间的时钟模型 | ||
selectedImageryProviderViewModel | ProviderViewModel | 当前的底图层视图模型, 如果不设置则取第一个可用的底图层。仅当 baseLayerPicker 为 true 时生效 | |||
imageryProviderViewModels | Array. (ProviderViewModel) | createDefaultImageryProviderViewModels () | 底图切换组件中可以选择的视图模型数组。仅当 baseLayerPicker 为 true 时生效 | ||
selectedTerrainProviderViewModel | ProviderViewModel | 当前的地形图层视图模型, 如果不设置则取第一个可用的地形图层。仅当 baseLayerPicker 为 true 时生效 | |||
terrainProviderViewModels | Array. (ProviderViewModel) | createDefaultTerrainProviderViewModels () | 底图切换组件中可以选择的地形图层视图模型数组。仅当 baseLayerPicker 为 true 时生效 |
二、应用案例
1 . 需求
假设我要开发一个智慧城市应用程序,我的需求可能包括:
- 创建一个纯净的界面,没有多余的地图组件,以便用户能够专注于城市模型。
- 使用高分辨率的地形和影像数据,以便更真实地展现城市地貌。
- 添加建筑物的3D模型,以便用户能够清楚地看到城市中的建筑物。
- 启用阴影和天空大气效果,以增强场景的真实感。
- 优化渲染性能,以便用户能够流畅地浏览城市模型。
2 .代码实现:
// 使用多个自定义选项初始化查看器小部件。
var viewer = new Cesium.Viewer('cesiumContainer', {
// 以3D模式启动
sceneMode: Cesium.SceneMode.SCENE3D,
// 使用Cesium世界地形
terrainProvider: Cesium.createWorldTerrain(),
// 隐藏基础图层选择器
baseLayerPicker: false,
// 隐藏时间轴组件
timeline: false,
// 隐藏动画组件
animation: false,
// 隐藏场景模式选择组件
sceneModePicker: false,
// 隐藏全屏按钮
fullscreenButton: false,
// 隐藏VR按钮
vrButton: false,
// 隐藏地名查找组件
geocoder: false,
// 隐藏投影切换组件
projectionPicker: false,
// 隐藏导航帮助按钮
navigationHelpButton: false,
// 隐藏主页按钮
homeButton: false,
// 显示天空大气并启用阴影
skyAtmosphere: new Cesium.SkyAtmosphere(),
shadows: true,
});
// 添加建筑物的3D瓦片集
const tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: "/src/assets/b3dm/tileset.json",
})
);
viewer.flyTo(tileset);
3 .效果展示:
项目地址:
[Github地址]
[Gitee地址]
> 如果觉得我的文章对您有帮助,三连+关注便是对我创作的最大鼓励!或者一个star🌟也可以😂.