Cesium笔记(2):基本控件简介—Viewer控件配置地图界面/控件隐藏
原创
简单描述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),