Cesium中Viewer配置对照表

简介: 本文用于Cesium初始化界面的详细配置,是对这篇文章的延伸;内容不定时更新。

前言

本文用于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 .效果展示:

cesium-setup.gif

项目地址:

[Github地址]
[Gitee地址]


> 如果觉得我的文章对您有帮助,三连+关注便是对我创作的最大鼓励!或者一个star🌟也可以😂.
目录
相关文章
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
1951 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
3月前
|
缓存 前端开发 定位技术
Cesium加载Mapbox自定义地图
Cesium加载Mapbox自定义地图
101 0
|
5月前
|
XML JavaScript 前端开发
基于SVG的web页面图形绘制API介绍
基于SVG的web页面图形绘制API介绍
72 4
259Echarts - 3D 路径图(Airline on Globe)
259Echarts - 3D 路径图(Airline on Globe)
47 0
|
C++ 计算机视觉 Python
vs qt opencv c++图片相片查看编辑工具Image Viewer Image Editer
vs qt opencv c++图片相片查看编辑工具Image Viewer Image Editer
216 0
arcgis api 3.X 修改自带弹窗样式 2022年6月12日
自带的弹窗介绍: arcgis api 3.X 修改自带弹窗样式插图 /*修改原有弹窗的css样式*/ /* 弹窗整体 */ .esriPopup { font-size: 16px; box-shadow: 10px 10px 5px #888888; } .esriPopup .sizer { position: relative; width: 400px; /* 弹窗宽度 */ z-index: 1; } /* 标题部分 */ .esriPopup .titlePane { background-color: rgba(7
|
前端开发 JavaScript
Viewer,一款好用的图片预览插件
在项目中,需要点击查看图片,本次我用了 viewer 这款插件
612 0
Viewer,一款好用的图片预览插件
|
Web App开发 JavaScript 前端开发
ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)
前言 Arcgis是一个地理系统的平台,可用来进行数据数据展示或二次开发。这里我们所使用的是Arcgis对于JavaScript的api,也就是web端的api进行开发。
10200 2