Cesium笔记(2):基本控件简介—Viewer控件配置地图界面/控件隐藏
Author：zhoulujun Date：
简单描述Viewer
Viewer 类是 cesium 的核心类，是地图可视化展示的主窗口，cesium 程序应用的切入口，它提供了基本的虚拟地球显示和众多的控制选项.
new Cesium.Viewer(container, options)，配置地图界面，需要设置options参数，具体参看：https://cesium.com/docs/cesiumjs-ref-doc/Viewer.html
var viewer = new Cesium.Viewer('cesiumContainer');//cesiumContainer是一个页面中的一个div
我们看到一个虚拟地球在中央，默认使用Bing卫星图层，右上角的button依次为地名查找（依赖google服务）、重置到初始焦点与缩放（可以拖动缩放后点击该按钮即可复位）、地图图层投影方式（3D、2D、Columbus）、地图图层选择（包括image和terrain）、简要帮助。
窗口下部为动画控制和时间线，用来展示动态内容时用于控制快慢和倒正回放。
Geocoder : 查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
Home Button :视角返回初始位置.
Scene Mode Picker : 选择视角的模式，有三种：3D，2D，哥伦布视图(CV)
Base Layer Picker : 图层选择器，选择要显示的地图服务和地形服务.
Navigation Help Button :导航帮助按钮，显示默认的地图控制帮助.
Animation : 动画器件，控制视图动画的播放速度.
Timeline :时间线,指示当前时间，并允许用户跳到特定的时间.
Credits Display :版权显示，显示数据归属，必选
Fullscreen Button :全屏按钮.
下面是一个基本配置
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, // 是否创建动画小器件，左下角仪表
baseLayerPicker: false, // 是否显示图层选择器
fullscreenButton: false, // 是否显示全屏按钮
geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
homeButton: false, // 是否显示Home按钮
infoBox: false, // 是否显示信息框
sceneModePicker: false, // 是否显示3D/2D选择器
selectionIndicator: false, // 是否显示选取指示器组件
timeline: false, // 是否显示时间轴
navigationHelpButton: false, // 是否显示右上角的帮助按钮
scene3DOnly: true, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
clock: new Cesium.Clock(), // 用于控制当前时间的时钟对象
selectedImageryProviderViewModel: undefined, // 当前图像图层的显示模型，仅baseLayerPicker设为true有意义
imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker选择的图像图层ProviderViewModel数组
selectedTerrainProviderViewModel: undefined, // 当前地形图层的显示模型，仅baseLayerPicker设为true有意义
terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
imageryProvider: new Cesium.OpenStreetMapImageryProvider({
credit: '',
url: '//192.168.0.89:5539/planet-satellite/'
}), // 图像图层提供者，仅baseLayerPicker设为false有意义
terrainProvider: new Cesium.EllipsoidTerrainProvider(), // 地形图层提供者，仅baseLayerPicker设为false有意义
skyBox: new Cesium.SkyBox({
sources: {
positiveX: 'Cesium-1.7.1/Skybox/px.jpg',
negativeX: 'Cesium-1.7.1/Skybox/mx.jpg',
positiveY: 'Cesium-1.7.1/Skybox/py.jpg',
negativeY: 'Cesium-1.7.1/Skybox/my.jpg',
positiveZ: 'Cesium-1.7.1/Skybox/pz.jpg',
negativeZ: 'Cesium-1.7.1/Skybox/mz.jpg'
}
}), // 用于渲染星空的SkyBox对象
fullscreenElement: document.body, // 全屏时渲染的HTML元素,
useDefaultRenderLoop: true, // 如果需要控制渲染循环，则设为true
targetFrameRate: undefined, // 使用默认render loop时的帧率
showRenderLoopErrors: false, // 如果设为true，将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks: true, // 自动追踪最近添加的数据源的时钟设置
sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式
mapProjection: new Cesium.WebMercatorProjection(), // 地图投影体系
dataSources: new Cesium.DataSourceCollection(), // 需要进行可视化的数据源的集合
contextOptions: { // 传递给Scene对象的上下文参数（scene.options） 截图需要的
webgl: {
alpha: true,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: true,
// 通过canvas.toDataURL()实现截图需要将该项设置为true
preserveDrawingBuffer: true,
failIfMajorPerformanceCaveat: true
}
}
})
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 10000),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
roll: Cesium.Math.toRadians(0)
}
})看这里的备注，差不多了
view属性列表
vrButton：是否显示VR视图按钮
selectionIndicator：是否显示选中实体的标识
navigationInstructionsInitiallyVisible：true则默认显示帮助菜单，否则只有当用户点击帮助按钮时显示
clockViewModel：时钟视图模型，用来控制时间？？？
selectedTerrainProviderViewModel：当前选中的地形
当baseLayerPicker设置为false时，使用imageryProvider、terrainProvider指定影像和地形
skyBox：用于定义天空
skyAtmosphere：设置地球周围是否有发亮的光圈
useDefaultRenderLoop:false时viwer不处理地球的渲染，只有黑窗口
targetFrameRate:指定默认渲染器的帧率
automaticallyTrackDataSourceClocks:是否随着时钟的改变追踪更新数据，如果需要单独处理时钟时设置为false
contextOptions:上下文操作？？？
sceneMode:初始视图类型（SceneMode.SCENE2D、SceneMode.SCENE3D）
mapProjection:地图投影（2D视图或哥伦布视图时使用）
globe:传给scene的地球对象，如果设置为false则没有地球
orderIndependentTranslucency:半透明？？？
creditContainer:显示credit的DOM元素id
dataSources:默认数据源，如果指定了该值则需要负责销毁
terrainExaggeration:地形放大比例，不影响在地球上的相对位置
shadows:是否显示太阳的阴影
terrainShadows:地形是否显示太阳的阴影及阴影形式
mapMode2D:指定2D地图在水平方向的滚动和旋转形式
projectionPicker:是否显示投影选择器
Cesium基本的控件：
cesium view option 参数属性表格
| 的名字 | 类型 | 默认的 | 描述 |
|---|---|---|---|
| animation | 布尔 | true | 可选，如果设置为false,那么将不会创建动画小部件。 |
| baseLayerPicker | 布尔 | true | 可选，如果设置为false,那么将不会创建BaseLayerPicker小部件。 |
| fullscreenButton | 布尔 | true | 可选，如果设置为false,那么将不会创建FullscreenButton小部件。 |
| vrButton | 布尔 | false | 可选，如果设置为真,那么VRButton小部件将被创建。 |
| geocoder | 布尔 | true | 可选，如果设置为false,那么将不会创建Geocoder小部件。 |
| homeButton | 布尔 | true | 可选，如果设置为false,那么将不会创建HomeButton小部件。 |
| infoBox | 布尔 | true | 可选，如果设置为false,那么将不会创建信息框小部件。 |
| sceneModePicker | 布尔 | true | 可选，如果设置为false,那么将不会创建SceneModePicker小部件。 |
| selectionIndicator | 布尔 | true | 可选，如果设置为false,那么将不会创建SelectionIndicator小部件。 |
| timeline | 布尔 | true | 可选，如果设置为false,那么将不会创建时间轴部件。 |
| navigationHelpButton | 布尔 | true | 可选，如果设置为false,那么将不会创建导航帮助按钮。 |
| navigationInstructionsInitiallyVisible | 布尔 | true | 可选，如果导航指令最初应该是可见的,还是假的,如果不应该显示,直到用户显式地单击按钮。 |
| scene3DOnly | 布尔 | false | 可选当true,每个几何实例才会呈现3 d拯救GPU内存。 |
| clock | 时钟 | newClock() | 可选时钟控制当前时间的使用。 |
| selectedImageryProviderViewModel | ProviderViewModel | 可选当前的视图模型基础图像层,如果不是第一个可用的基础层提供使用。 这个值只如果有效的选择。 baseLayerPicker被设置为true。 | |
| imageryProviderViewModels | 数组。<ProviderViewModel> | createDefaultImageryProviderViewModels() | 可选数组从BaseLayerPicker ProviderViewModels是可选择的。 这个值只如果有效的选择。 baseLayerPicker被设置为true。 |
| selectedTerrainProviderViewModel | ProviderViewModel | 可选当前基础地形视图模型层,如果不是第一个可用的基础层提供使用。 这个值只如果有效的选择。 baseLayerPicker被设置为true。 | |
| terrainProviderViewModels | 数组。<ProviderViewModel> | createDefaultTerrainProviderViewModels() | 可选数组从BaseLayerPicker ProviderViewModels是可选择的。 这个值只如果有效的选择。 baseLayerPicker被设置为true。 |
| imageryProvider | ImageryProvider | newBingMapsImageryProvider() | 可选图片提供者使用。 这个值只如果有效的选择。 baseLayerPicker设置为false。 |
| terrainProvider | TerrainProvider | newEllipsoidTerrainProvider() | 可选地形提供者使用 |
| skyBox | skybox | 可选用于呈现星星的天空体。 当undefined使用,默认的恒星。 | |
| skyAtmosphere | SkyAtmosphere | 可选蓝色的天空,和地球的肢体周围的光芒。 设置为false关机。 | |
| fullscreenElement | 元素|字符串 | document.body | 可选元素或id被放置到全屏模式时全屏按钮被按下。 |
| useDefaultRenderLoop | 布尔 | true | 可选，如果这个小部件应该控制渲染循环,否则假。 |
| targetFrameRate | 数量 | 可选目标帧率时使用默认渲染循环。 | |
| showRenderLoopErrors | 布尔 | true | 可选，如果这是真的,这个小部件将自动向用户显示一个HTML面板包含错误,如果一个渲染循环发生错误。 |
| automaticallyTrackDataSourceClocks | 布尔 | true | 可选，如果这是真的,这个小部件将自动跟踪新添加的时钟设置数据源,如果数据源的更新时钟的变化。 设置这个假如果你想配置独立的时钟。 |
| contextOptions | 对象 | 可选上下文和WebGL创建属性对应options传递给Scene。 | |
| sceneMode | SceneMode | SceneMode.SCENE3D | 可选最初的场景模式。 |
| mapProjection | MapProjection | newGeographicProjection() | 可选地图投影使用2 d和哥伦布视图模式。 |
| globe | 全球 | newGlobe(mapProjection.ellipsoid) | 可选全球使用场景中。 如果设置为false,没有地球将被添加。 |
| orderIndependentTranslucency | 布尔 | true | 可选，如果真和配置支持它,使用独立的半透明。 |
| creditContainer | 元素|字符串 | 可选将包含DOM元素或IDCreditDisplay。 如果没有指定,信用被添加到小部件本身的底部。 | |
| dataSources | DataSourceCollection | newDataSourceCollection() | 可选数据源的可视化部件的集合。 如果这个参数是提供, 实例被认为是由调用者,不会被摧毁时,观众被摧毁。 |
| terrainExaggeration | number | 1.0 | 可选一个标量用来夸大了地形。 注意,地形夸张不会修改任何其他原始定位相对于椭球。 |
| shadows | 布尔 | false | 可选确定是否投下阴影。 |
| terrainShadows | ShadowMode | ShadowMode.RECEIVE_ONLY | 可选确定地形或接收来自太阳的阴影。 |
| mapMode2D | MapMode2D | MapMode2D.INFINITE_SCROLL | 可选决定是否可旋转或2 d地图可以在水平方向滚动无限。 |
参考文章：
cesium 之核心类 Viewer 简介篇 https://www.cnblogs.com/giserhome/p/6245408.html
Cesium初始化 https://www.cnblogs.com/reround/p/12160503.html
cesiumjs开发实践 (二) https://blog.csdn.net/happyduoduo1/article/details/51942815
Cesium之Viewer https://blog.csdn.net/zhy905692718/article/details/78865107
Cesium viewer 最常用的控件 API https://blog.csdn.net/sinat_35954205/article/details/52909698
转载本站文章《Cesium笔记(2):基本控件简介—Viewer控件配置地图界面/控件隐藏》,
请注明出处：https://www.zhoulujun.cn/html/GIS/cesium/8327.html