home > GIS > cesium >

Cesium笔记(2):基本控件简介—Viewer控件配置地图界面/控件隐藏

Date:

Viewer 类是 cesium 的核心类,是地图可视化展示的主窗口,cesium 程序应用的切入口,它提供了基本的虚拟地球显示和众多的控制选项。配置地图界面,需要设置options参数

简单描述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

cesium 界面

我们看到一个虚拟地球在中央,默认使用Bing卫星图层,右上角的button依次为地名查找(依赖google服务)、重置到初始焦点与缩放(可以拖动缩放后点击该按钮即可复位)、地图图层投影方式(3D、2D、Columbus)、地图图层选择(包括image和terrain)、简要帮助。

窗口下部为动画控制和时间线,用来展示动态内容时用于控制快慢和倒正回放。

  1. Geocoder : 查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图

  2. Home Button :视角返回初始位置.

  3. Scene Mode Picker : 选择视角的模式,有三种:3D,2D,哥伦布视图(CV)

  4. Base Layer Picker : 图层选择器,选择要显示的地图服务和地形服务.

  5. Navigation Help Button :导航帮助按钮,显示默认的地图控制帮助.

  6. Animation : 动画器件,控制视图动画的播放速度.

  7. Timeline :时间线,指示当前时间,并允许用户跳到特定的时间.

  8. Credits Display :版权显示,显示数据归属,必选

  9. 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控件Clock,相关的主要有Animation控件和Timeline控件,一般不需要限制。

  • Cesium控件BaseLayerPicker,底图选择控件,可扩展自己的BaseLayerPicker功能

  • Cesium控件SelectionIndicator& InfoBox,点击Entity,对应的是选择控件(SelectionIndicator),而呈现信息的载体,就是信息框控件(InfoBox)

  • Cesium控件Geocoder,地理信息查询相关

  • Cesium控件CesiumInspector,

  • Cesium控件 FullScreen/ VR / Home

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()可选时钟控制当前时间的使用。
selectedImageryProviderViewModelProviderViewModel 可选当前的视图模型基础图像层,如果不是第一个可用的基础层提供使用。 这个值只如果有效的选择。 baseLayerPicker被设置为true。
imageryProviderViewModels数组。<ProviderViewModel>createDefaultImageryProviderViewModels()可选数组从BaseLayerPicker ProviderViewModels是可选择的。 这个值只如果有效的选择。 baseLayerPicker被设置为true。
selectedTerrainProviderViewModelProviderViewModel 可选当前基础地形视图模型层,如果不是第一个可用的基础层提供使用。 这个值只如果有效的选择。 baseLayerPicker被设置为true。
terrainProviderViewModels数组。<ProviderViewModel>createDefaultTerrainProviderViewModels()可选数组从BaseLayerPicker ProviderViewModels是可选择的。 这个值只如果有效的选择。 baseLayerPicker被设置为true。
imageryProviderImageryProvidernewBingMapsImageryProvider()可选图片提供者使用。 这个值只如果有效的选择。 baseLayerPicker设置为false。
terrainProviderTerrainProvidernewEllipsoidTerrainProvider()可选地形提供者使用
skyBoxskybox 可选用于呈现星星的天空体。 当undefined使用,默认的恒星。
skyAtmosphereSkyAtmosphere 可选蓝色的天空,和地球的肢体周围的光芒。 设置为false关机。
fullscreenElement元素|字符串document.body可选元素或id被放置到全屏模式时全屏按钮被按下。
useDefaultRenderLoop布尔true可选,如果这个小部件应该控制渲染循环,否则假。
targetFrameRate数量 可选目标帧率时使用默认渲染循环。
showRenderLoopErrors布尔true可选,如果这是真的,这个小部件将自动向用户显示一个HTML面板包含错误,如果一个渲染循环发生错误。
automaticallyTrackDataSourceClocks布尔true可选,如果这是真的,这个小部件将自动跟踪新添加的时钟设置数据源,如果数据源的更新时钟的变化。 设置这个假如果你想配置独立的时钟。
contextOptions对象 可选上下文和WebGL创建属性对应options传递给Scene
sceneModeSceneModeSceneMode.SCENE3D可选最初的场景模式。
mapProjectionMapProjectionnewGeographicProjection()可选地图投影使用2 d和哥伦布视图模式。
globe全球newGlobe(mapProjection.ellipsoid)可选全球使用场景中。 如果设置为false,没有地球将被添加。
orderIndependentTranslucency布尔true可选,如果真和配置支持它,使用独立的半透明。
creditContainer元素|字符串 可选将包含DOM元素或IDCreditDisplay。 如果没有指定,信用被添加到小部件本身的底部。
dataSourcesDataSourceCollectionnewDataSourceCollection()可选数据源的可视化部件的集合。 如果这个参数是提供, 实例被认为是由调用者,不会被摧毁时,观众被摧毁。
terrainExaggerationnumber1.0可选一个标量用来夸大了地形。 注意,地形夸张不会修改任何其他原始定位相对于椭球。
shadows布尔false可选确定是否投下阴影。
terrainShadowsShadowModeShadowMode.RECEIVE_ONLY可选确定地形或接收来自太阳的阴影。
mapMode2DMapMode2DMapMode2D.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