cesium 知乎_Cesium入门4 – 创建Cesium Viewer

超、凢脫俗 2022-10-24 06:12 359阅读 0赞

任何Cesium应用程序的基础都是Viewer。Viewer是一个带有多种功能的可交互的三位数字地球的容器(盒子)。创建一个Viewer和HTML中的一个id为”cesiumContainer”的div绑定即可。

var viewer = new Cesium.Viewer('cesiumContainer');

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

默认地，场景支持鼠标(电脑)和手指(移动设备)交互。控制相机漫游数字地球可以通过以下方式：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自带了一些有用的组件：

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等组件。

var viewer = new Cesium.Viewer('cesiumContainer', \{ scene3DOnly: true, selectionIndicator: false, baseLayerPicker: false \});

发表评论取消回复

表情：

评论列表（有 0 条评论，359人围观）

还没有评论，来说两句吧...

相关阅读

相关 [cesium] 基于Webpack的Cesium项目搭建

装 1.下载nodejs并安装：[http://nodejs.cn/download/][http_nodejs.cn_download] 2. cesium - w...

╰半橙微兮°/ 2024年04月18日 19:42/ 0 赞/ 39 阅读

相关 cesium中文教程(cesium中文教程PDF)

写出英文字母的中文意思.S,XL,L,PRC,UK,UN,BBC,BBS,JSTV,SOS,DJ,NJTV,IT,CS,IE,APEC,QS,ISO,PICC,EMS,CAA

快来打我*/ 2023年09月26日 13:49/ 0 赞/ 107 阅读

相关 cesium学习——cesium中的坐标

一、坐标展现形式　　在cesium中，对于坐标数值单位有三种：角度、弧度和坐标值　　1.角度　　　　角度就是我们所熟悉的经纬度，对于地球的坐标建立如下：　　　　

r囧r小猫/ 2023年08月17日 17:24/ 0 赞/ 112 阅读

相关 [three][cesium] | 使用three渲染cesium地球瓦片

基于了cesium的四叉树调度地形影像数据，使用three构建球体和mesh瓦片并渲染，在每一帧渲染的时候更新frameState所需的参数。目前已经实现大概的加载流程还有

旧城等待，/ 2023年01月16日 03:19/ 0 赞/ 178 阅读

相关 cesium初始化

洒家接触cesium不久，从现在开始要陆续记录下心得。年纪大了，脑细胞成片成片地死亡，快成S逼了。一般来说，我们应用个什么东西，都不会老老实实地采用默认值，一定会折腾一下才

一时失言乱红尘/ 2022年11月25日 10:29/ 0 赞/ 121 阅读

相关 cesium 知乎_Cesium入门4 – 创建Cesium Viewer

任何Cesium应用程序的基础都是Viewer。Viewer是一个带有多种功能的可交互的三位数字地球的容器(盒子)。创建一个Viewer和HTML中的一个id为”cesiumC

超、凢脫俗/ 2022年10月24日 06:12/ 0 赞/ 360 阅读

相关 [cesium] | 结合Cesium的点云+全景展示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

矫情吗；*/ 2022年10月09日 06:25/ 0 赞/ 724 阅读

相关 Vue+Cesium

VUE 一、安装node环境 1. [官方网址][Link 1] 建议下载长期稳定版本 2. 检查安装是否成功打开cmd命令行

Bertha 。/ 2022年03月16日 05:44/ 0 赞/ 723 阅读

相关 cesium入门笔记集合

目录标题一、认识Cesium 概念作用二、环境建立应用程序目录

比眉伴天荒/ 2022年03月15日 11:16/ 0 赞/ 1290 阅读

相关 vue 2.x+webpack+cesium1.64详解（2）：创建 Cesium Viewer

目录一、Viewer介绍二、生成一Viewer 三、Viewer配置 3.1 Viewer默认鼠标和滚轮事件 3.2 默认Viewer自带的组件 3.3

喜欢ヅ旅行/ 2021年07月24日 20:36/ 0 赞/ 538 阅读