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

喜欢ヅ旅行 2021-07-24 20:36 573阅读 0赞

**目录**

一、Viewer介绍

二、生成一Viewer

三、Viewer配置

3.1 Viewer默认鼠标和滚轮事件

3.2 默认Viewer自带的组件

3.3 使用代码来配置Viewer的组件

--------------------

# 一、Viewer介绍 #

Cesium中任何一个应用程序的基础都是Viewer。它是一个带有多种功能的可交互的三维数字地球。

# 二、生成一Viewer #

new一个Viewer，并绑定一个div的id即可。

var viewer = new Cesium.Viewer('cesiumContainer');//"cesiumContainer"为HTML中div的id

# 三、Viewer配置 #

## 3.1 Viewer默认鼠标和滚轮事件 ##

*  单击左键，拖动鼠标：平移
 *  单击右键，拖动鼠标：放大缩小
 *  滚动滚轮：放大缩小
 *  按住滚轮，晃动：在点击点为中心，视角上下左右晃动

## 3.2 默认Viewer自带的组件 ##

![format_png][]

*  数字1:GeoCoder（地图编码器）：位置搜索工具，用照相飞机查询位置，默认使用bingmap地图
 *  数字2：Home（主页）：返回默认视图
 *  数字3：scene mode picker（场景模式选择器）：3D、2D、哥伦布图、CV模式之间切换
 *  数字4：base Layer Picker（基础层显示器）：选择三维数字地球的底图（imagery and terrain）
 *  数字5：Navigation Help Button（导航帮助按钮）：帮助提示，如何操作数字地球
 *  数字6：Animation（动画）：控制视图view的播放速度
 *  数字7：Timeline（时间轴）：展示当前时间和允许用户在进度条上拖动到任何一个指定的时间
 *  数字8：Credits Display（显示器）：展示商标版权和数据源
 *  数字9：FullscreenButton （全屏）: 视察全屏按钮

## 3.3 使用代码来配置Viewer的组件 ##

具体配置参数：[http://cesium.xin/cesium/cn/Documentation1.62/Viewer.html][http_cesium.xin_cesium_cn_Documentation1.62_Viewer.html]

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

[format_png]: /images/20210724/88f5723485d74acb814168d9da117fc2.png
[http_cesium.xin_cesium_cn_Documentation1.62_Viewer.html]: http://cesium.xin/cesium/cn/Documentation1.62/Viewer.html