QPaaS_DT_API

场景视图

场景视图是 QPaaS_DT_API 调用的入口，它里面包含了云渲染视频流的接入渲染，并且封装了一些常用的方法以及模块类的快速入口。

viewer.png

调用示例

onMounted(() => {
  nextTick();
  const viewer = new Viewer(container.value, {
    streamUrl: '10.10.10.253:5668',
    cameraOptions: {
      coordinate: [121.99225616455078, 40.75633239746094, 57.56663131713867],
      armDistance: 1509.8798828125,
      // armDistanceMin: 1500,
      // armDistanceMax: 400000,
      pitch: -21.074901580810547,
      // pitchMin: -89,
      // pitchMax: 5,
      yaw: -131.867431640625,
      // rotationSpeed: 2,
      // zoomSpeed: 100000,
      panIntensity: 0.8
      // allowIdle: false,
      // idleTime: 15,
      // idleAnimationLength: 1,
      // idleRotationPitch: 8,
      // idleRotationYaw: 45,
      // idleIsClockwise: true,
    }
  });
});

实例参数

// 初始化视图所需参数
export type ViewerOptions = {
  streamUrl: string; // 视频流地址
  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
  • 只读
  • 获取指南针实例对象，调用指南针实例相关方法

视频流 video 元素

  • streamingVideo
  • 只读
  • 获取视频流的 video 元素，可以用于控制 video 相关属性样式

方形区域实例

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

圆形区域实例

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

多边形区域实例

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

测量工具实例

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

绘制工具实例

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

路径热力图实例

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

粒子特效实例

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

自定义模型实例

  • customModel
  • 只读
  • 获取自定义模型实例对象，调用自定义模型实例相关方法

智慧建筑实例

  • smartBuilding
  • 只读
  • 获取智慧建筑对象，调用智慧建筑相关方法

方法

镜头聚焦点位

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

前端页面交互触发视频播放

  • 用于初始化是前端页面交互触发视频播放
  • 方法名：playStream
  • 参数说明：
playStream(): this {}
  • 示例参考：
<script setup lang="ts">
import { Viewer } from '@qpaas/dt-api';
import { nextTick, onMounted, ref } from 'vue';
const container = ref(undefined);
let viewer: Viewer;

onMounted(async () => {
  nextTick();
  viewer = new Viewer(container.value, {
    streamUrl: '10.10.10.253:5668',
    cameraOptions: {
      coordinate: [121.99225616455078, 40.75633239746094, 57.56663131713867],
      armDistance: 1509.8798828125,
      pitch: -21.074901580810547,
      yaw: -131.867431640625,
      panIntensity: 0.8
    }
  });
});

function handleStream() {
  viewer.playStream();
}
</script>
<template>
  <div class="viewer">
    <div class="tools">
      <el-button type="primary" @click="handleStream()"
        >初始化播放视频</el-button
      >
    </div>
    <div class="home" ref="container"></div>
  </div>
</template>

设置视频分辨率

  • 设置视频分辨率
  • 方法名：setViewportResolution
  • 参数说明：
// wdith --- 视频宽度  height----视频高度
setViewportResolution(width: number, height: number): this {}
  • 示例参考：
viewer.setViewportResolution(1920, 1080);

清空实例操作

  • 清空视频实例操作

  • 方法名：clear

  • 参数说明：

  • 示例参考：

viewer.on('loadend', () => {
  viewer.clear();
});

销毁当前视图

  • 销毁当前视图

  • 方法名：destroy

  • 参数说明：

  • 示例参考：

viewer.destroy();

场景视图事件

  • 场景视图事件
  • 方法名：on/off
  • 参数说明：
// 开启事件监听
on(type: ViewerEventType, callback, context) {}

// 关闭事件监听
off(type: ViewerEventType, callback, context): boolean {}

// ViewerEventType 参数说明
export class ViewerEventType {
  static Loadend = 'loadend' as const; // 视频已正常播放
  static CameraChanged = 'cameraChanged' as const; // 相机移动事件
}
  • 示例参考：
viewer.on(ViewerEventType.Loadend, (evt: any) => {
  console.log(evt);
});
上次更新:
贡献者: zhaotianliang, liuhe_ay