qe-video-primitive

这个组件主要用于三维中添加视频融合,支持 hls 以及 mp4 格式视频。

---

实例

隐藏代码

<template>

  <div style="height: 450px;">
    <qe-viewer
      :imagery-type="'TMap'"
      :default-view="defaultView"
      :scene3d-only="true"
      :request-render-mode="true"
    >
    <qe-primitive-layer>
          <qe-video-primitive
          :positions="pos"
          :rotation="rotation"
        >
          <video
            muted
            autoplay
            src="http://dc.dvgis.cn/examples/data/demo.mp4"
            loop
            crossorigin
            controls
            style="position: absolute;top: 20px;z-index: -3;"
          />
        </qe-video-primitive>
        <qe-video-primitive
          :positions="pos1"
          :rotation="rotation"
        >
          <video
            muted
            autoplay
            src="http://dc.dvgis.cn/examples/data/demo.mp4"
            loop
            crossorigin
            controls
            style="position: absolute;top: 20px;z-index: -3;"
          />
        </qe-video-primitive>
      </qe-primitive-layer>   
    </qe-viewer>

  </div>
</template>

<script>
import { QeViewer, QePrimitiveLayer, QeVideoPrimitive } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'

export default {
  components: {
    QeViewer, 
    QePrimitiveLayer, 
    QeVideoPrimitive
  },
  data () {
    return {
      defaultView: [
        118.63741361,
        32.07052751,
        249.526425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
        pos1: [
        [118.63770288215811, 32.071989857842105, -0.06203600987178611],
        [118.63770288215811, 32.071160564236685, -0.05808186397617365],
        [118.63854320585982, 32.071160564236685, -0.05808186397617365],
        [118.63854320585982, 32.071989857842105, -0.06203600987178611]
      ],
        pos: [
        [118.63689173676055, 32.07228294609373, -0.0005982753604198594],
        [118.63689173676055, 32.07178424343493, -0.031405017292563564],
        [118.63737693465337, 32.07178424343493, -0.031405017292563564],
        [118.63737693465337, 32.07228294609373, -0.0005982753604198594]
      ],
      className: 'video',
      rotation: 4.76474885794452 
    };
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
positions	多边形坐标串，格式参照示例代码 [[lng-经度,lat-纬度,alt-高度],[],...]	array	—	—
rotation	视频材质旋转角度(弧度)	number	—	0

Events

覆盖物事件的使用请参照上面Videoprimitive 实例

---

// 覆盖物可选事件
"ready" // 组件装载后，返回当前实例对象