快速上手

使用包管理器

1】登录 NPM 私有仓库

npm login --registry https://open-npm.qpaas.com
# username: 启业云平台账号
# password: 启业云平台密码
# email: 个人邮箱

2】安装依赖包

npm install -D @qpaas/dt-api

浏览器直接引入

<head>
  <!-- Import QDT library -->
  <script src="/lib/qdt.js"></script>
</head>

快速使用

1】直接使用依赖包

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import { Viewer } from '@qpaas/dt-api'

const container = ref(undefined)
let viewer: Viewer

onMounted(() => {
  nextTick()
  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
    }
  })
})
</script>

<template>
  <div class="viewer">
    <div class="home" ref="container"></div>
  </div>
</template>

2】浏览器直接引入使用

<!DOCTYPE html>
<html>
    <head>
        <title>QDT-test</title>
        <script src="./dist/qdt.js" charset="UTF-8"></script>
    </head>

    <body>
        <div class="viewer">
            <div class="home" id="container"></div>
        </div>
        <script type="text/javascript">
            window.addEventListener("load", (event) => {
                const viewer = new QDT.Viewer('container', {
                    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
                    }
                })
                document.getElementById('playerUI').style.position = 'absolute'
            });
        </script>
    </body>
</html>

# 快速上手

# 使用包管理器

# 浏览器直接引入

# 快速使用

快速上手

使用包管理器

浏览器直接引入

快速使用