请选择 进入手机版 | 继续访问电脑版
查看: 6599|回复: 0

Cesium入门教程 4 - Cesium目录框架结构

[复制链接]

该用户从未签到

9

主题

9

帖子

129

积分

超级版主

Rank: 8Rank: 8

积分
129
发表于 2019-9-25 14:19:11 | 显示全部楼层 |阅读模式
本帖最后由 论坛超级版主 于 2019-9-25 15:10 编辑

任何Cesium应用程序的基础都是Viewer。Viewer是一个带有多种功能的可交互的三位数字地球的容器(盒子)。创建一个Viewer和HTML中的一个id为"cesiumContainer"的div绑定即可。
  1. var viewer = new Cesium.Viewer('cesiumContainer');
复制代码

使用以上代码之后,能看到下图所示的基本的数字地球:

5b70f7c2119d5.jpg

默认地,场景支持鼠标(电脑)和手指(移动设备)交互。控制相机漫游数字地球可以通过以下方式:

  • Left click and drag - Pans the camera over the surface of the globe.
  • Right click and drag - Zooms the camera in and out.
  • Middle wheel scrolling - Also zooms the camera in and out.
  • Middle click and drag - Rotates the camera around the point on the surface of the globe.


翻译
  • 按住鼠标左键拖拽 - 让相机在数字地球平面平移。
  • 按住鼠标右键拖拽 - 放缩相机。
  • 鼠标滚轮滑动 - 放缩相机。
  • 按住鼠标中键拖拽 - 在当前地球的屏幕中间点,旋转相机。

默认的Viewer自带了一些有用的组件:

5b70f7cbf3693.jpg

  • Geocoder : A location search tool that flies the camera to queried location. Uses Bing Maps data by default.
  • HomeButton : Flies the viewer back to a default view.
  • SceneModePicker : Switches between 3D, 2D and Columbus View (CV) modes.
  • BaseLayerPicker : Chooses the imagery and terrain to display on the globe.
  • NavigationHelpButton : Displays the default camera controls.
  • Animation : Controls the play speed for view animation.
  • CreditsDisplay : Displays data attributions. Almost always required!
  • Timeline : Indicates current time and allows users to jump to a specific time using the scrubber.
  • FullscreenButton : Makes the Viewer fullscreen.


翻译
  • Geocoder : 一种地理位置搜索工具,用于显示相机访问的地理位置。默认使用微软的Bing地图。
  • HomeButton : 首页位置,点击之后将视图跳转到默认视角。
  • SceneModePicker : 切换2D、3D 和 Columbus View (CV) 模式。
  • BaseLayerPicker : 选择三维数字地球的底图(imagery and terrain)。
  • NavigationHelpButton : 帮助提示,如何操作数字地球。
  • Animation :控制视窗动画的播放速度。
  • CreditsDisplay : 展示商标版权和数据源。
  • Timeline : 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
  • FullscreenButton : 视察全屏按钮。


我们可以通过代码来配置视窗组件,在我们初始化视窗的时候,通过配置参数添加/移除相关组件。 以下代码是通过参数配置得到的viewer,该Viewer不带selection indicators, base layer picker or scene mode picker等组件。
  1. var viewer = new Cesium.Viewer('cesiumContainer', {
  2.     scene3DOnly: true,
  3.     selectionIndicator: false,
  4.     baseLayerPicker: false
  5. });
复制代码

如果需要查看Viewer的完整配置,请查看:https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

cesium中国官方网站

网站简介:cesiumChina是国内cesium相关技术开源社区,旨在为国内更多的技术开发人员提供最前沿的技术资讯,为更多的图形工作从业者提供一个学习、交流的技术平台。

联系我们

  • 工作时间:09:00 - 18:00
  • 反馈邮箱:1315785073@qq.com

QQ|Archiver|手机版|小黑屋|cesiumchina ( 陕ICP备14000835号-5 )

快速回复 返回顶部 返回列表