场景控制

在 SDK 中提供了一些属性和函数用来对场景进行控制，例如对场景中心、场景视角等的控制。

1. 场景中心

可通过场景初始化第二个参数对象中的 center 属性设置场景的中心位置。

type center = [number, number]
注：前一个数字是中心点经度值，后一个数字是中心点纬度值

示例代码：

new ubm.Scene("app", {
  ...
  // 自动适配区域
  center: [116.23, 39.54],
})

2. 场景视角

场景视角由相机控制。

2.1 场景默认视角

在初始化场景时，可通过场景初始化参数的 camera 属性设置场景的默认视角。

  • 相机的数据结构
type camera = {
  // 相机位置
  position: {
    // 经度
    longitude: number,
    // 纬度
    latitude: number,
    // 视角高度，单位为米。
    z: number
  },
  // 倾斜角度
  tilt: number
}
  • 示例代码
new ubm.Scene("app", {
  ...
  // 默认视角
  camera: {
    position: {
      latitude: 39.89876366941874,
      longitude: 116.39183281819857,
      z: 10654
    },
    tilt: 60
  }
})

2.2 场景实时视角

在场景交互过程中，可以使用 scene.camera 实时获取场景视角信息，也可通过scene.constraints来限制视野角度，视角信息的数据结构如下：

  • 约束相机的倾斜角度
interface IConstraintsInfo {
    //角度限制(以九十度角为基准,即正视地表的角度为九十度角)
    tilt: {
      max: number, // 最大可滑动视野角度
      mode: string // 默认"auto"自动 | "manual" 手动
    }
}
  • 设置场景视图的缩放范围
interface IZoomRangeInfo {
  min: 5, // 最小
  max: 15 // 最大
}
  • 相机
interface ICameraInfo {
  // 偏航角
  heading: number
  // 俯仰角
  tilt: number
  // 相机的对角线角度
  fov: number
  // 缩放
  zoom: number
  // 相机的位置信息
  position: CamearPosition
}
  • 相机位置
// 相机位置
interface CameraPosition {
  // 纬度
  latitude: number
  // 经度
  longitude: number
  //高度
  z: number
}
  • 读取当前场景的视角信息：
const camera = scene.camera

2.3 改变场景视角

scene.goTo() 函数可以用来改变场景视角，基于这个函数可以通过编程的方式实现诸如开场动画，飞行，旋转，漫游等交互效果。

其使用方式如下：

// goTo函数参数数据结构
interface IGoTo {
  pos: ICameraInfo | IFullExtent
  ani: IGoToAnimateOptions
}

scene.goTo(pos, ani)

pos 是目标位置，ani 是相机运动的动画函数配置选项。

2.3.1 目标位置

目标位置可以是一个点，也可以是一个图层的地理范围。

当目标位置是点信息时，此点信息就是目标相机信息，其数据结构见上述中场景实时视角场景实时视角中的场景信息数据结构。其中 fov, heading, tilt，zoom 属性是选填项，可以根据需求进行自定义设置。

示例代码：

const { fov, heading, tilt } = scene.camera
scene.goTo({
  position: {
    longitude：113.28221607781934, 
    latitude：23.235787442430116
  }, 
  // 相机的对角线视角
  fov, 
  // 相机的拍摄方向
  heading, 
  // 相机相对于地面的倾斜角度
  tilt, 
  // 缩放
  zoom: 20
}, { 
  easing: 'in-cubic', 
  duration: 1000 
})

当目标位置是图层时，pos 可以设置为含有 layer.fullExtent 的对象，layer.fullExtent 是图层的全图范围。具体使用方法如下：

interface IFullExtent {
  fullExtent: ILayerfullExtent
  tilt: number
}

layer.when(() => {
  scene.goTo({fullExtent:layer.fullExtent,tilt:60}, {
    speedFactor: 2,
  })
})

2.3.2 动画选项

//ani 数据结构
interface IGoToAnimateOptions {
  // 是否显示动画
  animate: boolean
  // 动画速度
  speedFactor: number
  // 动画持续时间，会覆盖speedFactor属性
  duration: number
  // 动画函数
  easing: Easing
}

// 动画函数可选项
type Easing = 'linear' | 'in-cubic' | 'out-cubic' | 'in-out-cubic' | 'in-expo' 
| 'out-expo' | 'in-out-expo' | 'in-out-coast-quadratic'

2.4 改变场景方向

scene.goOrientation函数可以用来改变场景方向，便于控制场景的渲染结果在屏幕上的显示位置

其使用方式如下：

// 方向类型可选项，分为前后左右上下和它们的组合，其中'home'是主视图方向
type direction = 'home' | 'front' | 'top' | 'bottom' | 'back' | 'left' | 'right' |
'front-left-top' | 'front-left-bottom' | 'front-right-top' | 'front-right-bottom' | 'back-left-top' | 'back-left-bottom' | 'back-right-top' | 'back-right-bottom'

// 更改场景方向
scene.goOrientation('front-left-top')
Table of Contents