类名 KeyboardCameraController

# new KeyboardCameraController(viewer, options)

场景相机漫游工具,可以实现沉浸式的鼠标键盘漫游功能,具体操作方法如下:

1. 相机平移操作,这类操作不会改变相机的朝向,只会改变相机的位置:

  • W:相机位置向前移动
  • S:相机位置向后移动
  • A:相机位置向左移动
  • D:相机位置向右移动
  • Q:相机位置升高
  • E:相机位置降低

2. 相对于相机视点操作,其中UOJL操作会改变相机的位置,也会改变相机的朝向,而IK操作只会改变相机相较视点的距离(在执行UOJL操作时请勿同时执行其他按键操作):

  • I:相机视角靠近屏幕中心点
  • K:相机视角远离屏幕中心点
  • J:绕屏幕中心点向左旋转
  • L:绕屏幕中心点向右旋转
  • U:绕屏幕中心点向上旋转
  • O:绕屏幕中心点向下旋转

3. 相机自身操作,这类操作不会改变相机的位置,只会改变相机的朝向(在全屏状态下可使用鼠标调整相机视角):

  • :向上抬高视角
  • :向下降低视角
  • :向左移动视角
  • :向右移动视角

4. 鼠标操作:

  • 开启鼠标操作功能后,页面将进入全屏模式,此时相机视角可通过鼠标移动进行操作

5. 辅助操作:

  • Shift:加速相机平移操作,调整移动步长为原来的两倍
  • R:重置视角到初始视角,仅在参数initView定义时有效

参数:

名称 类型 默认值 描述
viewer Object

三维地球场景的视图对象

options Object

场景相机漫游工具的配置项

enableMouseLook Boolean true

是否开启鼠标控制模式,开启后将进入全屏模式,此时相机视角可通过鼠标移动进行操作

enableDynamicMoveStep Boolean true

是否开启动态移动步长,开启后将根据视角距离地面高度动态计算移动步长,moveStep参数将不再生效

enableCollisionDetection Boolean false

是否开启碰撞检测

mouseSensitivity Number 10

鼠标灵敏度,该参数仅在鼠标控制模式下有效

moveStep Number 5

移动步长,单位为米

rotateStep Number 1

旋转步长,单位为度

initView Object

初始视角,参数与Camera#setView方法相同,开始漫游时视角将重置到该视角,若不设置则默认从当前视角开始漫游

示例

场景相机键盘漫游

// 参考示例:
http://webclient.smaryun.com/#/modules/cesium/sceneControl/camera/keyboard-roaming

// ES5引入方式
const { KeyboardCameraController } = zondy
// ES6引入方式
import { KeyboardCameraController } from "@mapgis/webclient-cesium-plugin"

// 初始化视图对象
let viewer = new Cesium.Viewer("cesiumContainer");

// 加载模型
let tilesetModel = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: 'http://192.168.82.89:8200/3DData/ModelCache/3DTileset/1.0/dayantaresult/tileset.json'
  })
);

// 视角定位到模型
viewer.zoomTo(tilesetModel);

// 实例化CameraRoamingTool对象
let cameraRoaming = new KeyboardCameraController(viewer, {
  enableMouseLook: false,
  enableDynamicMoveStep: false,
  moveStep: 0.2,
  initView: {
    destination: Cesium.Cartesian3.fromDegrees(108.9594, 34.2184, 8),
    orientation: {
      heading: 0,
      pitch: 0,
      roll: 0
    }
  }
});

// 开启碰撞检测
cameraRoaming.enableCollisionDetection = true;

// 说明:当enableMouseLook参数为true时,开启漫游后页面将进入全屏模式,由于浏览器安全策
// 略的限制,此时start()方法必需由一个用户手势触发(如主动点击按钮),而不能由程序被动触发

// 开始漫游
cameraRoaming.start();

// 停止漫游
cameraRoaming.stop();

成员变量

Boolean

# enableCollisionDetection

获取或设置当前是否开启碰撞检测

Boolean

# enableDynamicMoveStep

获取或设置当前是否开启动态移动步长

Boolean

# enableMouseLook

获取或设置当前是否开启鼠标操作功能,当该参数为true时,开启漫游后页面将进入全屏模式,由于浏览器安全策略 的限制,此时start()方法必需由一个用户手势触发(如主动点击按钮),而不能由程序被动触发

Object

# initView

获取或设置初始视角

Number

# mouseSensitivity

获取或设置鼠标灵敏度

Number

# moveStep

获取或设置移动步长

Number

# rotateStep

获取或设置旋转角度

方法

# start()

开始场景相机漫游

# stop()

停止场景相机漫游,若在全屏状态下,则无需调用该方法停止场景相机漫游,只需要按下ESCF11

构造函数
成员变量
方法
事件