客户端场景视图

客户端场景视图是 QPaaS_DT_API 开发 UE 客户端程序调用的入口,封装了一些常用的方法以及模块类的快速入口。WEB 的应用程序可以使用封装的 API 完成 UE 相关功能开发,最后由 QPaaS_DT_Editor 将 WEB 页面嵌入一起打包为客户端应用程序。

client-viewer.png

调用示例

onMounted(async () => {
  nextTick()
  viewer = new ClientViewer({
    cameraOptions: {
      coordinate: [122.00655364990234, 40.75194549560547, 57.27960205078125],
      armDistance: 57240.28125,
      // armDistanceMin: 1500,
      // armDistanceMax: 400000,
      pitch: -12.684314727783203,
      // pitchMin: -89,
      // pitchMax: 5,
      yaw: -147.36483764648438,
      // rotationSpeed: 2,
      // zoomSpeed: 100000,
      panIntensity: 0.5
      // allowIdle: false,
      // idleTime: 15,
      // idleAnimationLength: 1,
      // idleRotationPitch: 8,
      // idleRotationYaw: 45
    }
  })
  viewer.camera.getInfo().then((info: any) => {
    console.log(info);
  });
})

实例参数

// 初始化视图所需参数
export type ClientViewerOptions = {cameraOptions:CameraOptions };

// 初始化相机参数
export type CameraOptions = {
  coordinate?: number[];  // 相机坐标位置
  armDistance?: number;   //  镜头距坐标点距离
  armDistanceMin?: number; // 镜头距坐标点距离范围最小值设置
  armDistanceMax?: number; // 镜头距坐标点距离范围最大值设置
  pitch?: number; // 镜头俯仰角; 值的范围 [-90, 90]
  pitchMin?: number; // 镜头俯仰角范围最小值设置 
  pitchMax?: number; // 镜头俯仰角范围最大值设置
  yaw?: number; // 镜头偏航角
  rotationSpeed?: number; // 镜头旋转速度设置 默认值为:2.0
  zoomSpeed?: number; // 镜头缩放速度设置  默认值为:100000.0
  panIntensity?: number; // 镜头平移强度 默认值为:0.2
  allowIdle?: boolean; // 是否开启镜头绕中心点的旋转动画  默认值: false
  idleTime?: number; // 旋转动画开启时间,默认 15.0 秒后开启动画
  idleAnimationLength?: number; // 动画长度 默认值: 1.0
  idleRotationPitch?: number; // 旋转动画设置的镜头俯仰角 默认值: 8.0
  idleRotationYaw?: number; // 旋转动画设置的镜头偏航角   默认值: 45.0
  idleIsClockwise?: boolean; // 旋转动画是否按照顺时针方向 默认值:true
};

成员变量

相机实例

  • camera
  • 只读
  • 获取相机实例对象,调用相机相关方法

POI 实例

  • marker
  • 只读
  • 获取 Marker 实例对象,调用 Marker 相关方法

路径实例

  • polyline
  • 只读
  • 获取路径实例对象,调用路径相关方法

漫游视角实例

  • character
  • 只读
  • 获取漫游视角实例对象,调用视角切换相关方法

天气控件实例

  • weather
  • 只读
  • 获取天气控件实例对象,调用天气控件相关方法

坐标拾取控件实例

  • picking
  • 只读
  • 获取坐标拾取控件实例对象,调用坐标拾取控件相关方法

圆环动画实例

  • circleEffect
  • 只读
  • 获取圆环动画实例对象,调用圆环动画相关方法

轨迹回放实例

  • trackline
  • 只读
  • 获取轨迹回放实例对象,调用轨迹回放相关方法

车流实例

  • carFlow
  • 只读
  • 获取车流实例对象,调用车流相关方法

指南针控件实例

  • compass
  • 只读
  • 获取指南针实例对象,调用指南针实例相关方法

方形区域实例

  • squareRegion
  • 只读
  • 获取方形区域实例对象,调用方形区域实例相关方法

圆形区域实例

  • roundRegion
  • 只读
  • 获取圆形区域实例对象,调用圆形区域实例相关方法

多边形区域实例

  • polygon
  • 只读
  • 获取多变形区域实例对象,调用多变形区域实例相关方法

测量工具实例

  • measureTool
  • 只读
  • 获取测量工具实例对象,调用测量工具实例相关方法

绘制工具实例

  • drawTool
  • 只读
  • 获取绘制工具实例对象,调用绘制工具相关方法

路径热力图实例

  • roadHeatMap
  • 只读
  • 获取路径热力图实例对象,调用路径热力图实例相关方法

粒子特效实例

  • particleEffect
  • 只读
  • 获取粒子特效实例对象,调用粒子特效实例相关方法

方法

镜头聚焦点位

  • 根据坐标位置进行镜头聚焦定位
  • 方法名:flyTo
  • 参数说明:
flyTo(
    coordinate: Array<number>, // 需要聚焦的坐标数据
    options: {
      yaw?: number;  // 聚焦镜头偏航角设置
      pitch?: number; // 聚焦镜头俯仰角设置
      armDistance?: number; // 镜头距聚焦坐标点距离设置
    }
  ): this {}
  • 示例参考:
viewer.flyTo([122.0016171003,40.7461719867,16])
上次更新:
贡献者: zhaotianliang