跳到主要内容
版本：9.4.0

步骤十二、设备管理-监控视频

先决条件​

授权

您需要先拥有一个授权码，授权码获取请参考授权申请。

资源获取​

注意

场景中涉及到的图片、模型、第三方库、源码等资源，点击下载获取。

步骤​

  • 设备管理中的监控视频模块可以接入监控数据，随时调取查看监控画面。

1、添加地理围栏​

  • 用三维地理围栏将监控覆盖的区域围起来。

    addFence() {
      // 飞行定位
      let locations = [
        {
          center: [120.72926045543136, 31.28868731509428],
          zoom: 17.587162625340376,
          bearing: -37.87271910936988,
          pitch: 64.42598133276567,
          speed: 0.3,
          curve: 1,
        },
      ];
      this.changeViewers(locations);

      // 地理围栏数据
      let fenceData = [
        [120.72841909978374, 31.287745591127717, 1],
        [120.72850753347531, 31.287652507096332, 1],
        [120.72946780543789, 31.28764973659848, 1],
        // ...剩余数据省略，可以从源码中复制
      ];
      
      // 将地理围栏添加到场景中
      this.Fence = this._layer.addGeoFencing({
        type: 'fade',     // 设置地理围栏的类型
        color: '#2647d4', // 地理围栏的颜色
        speed: 2,         // 地理围栏的变化速度
        opacity: 0.8,     // 地理围栏不透明度
        height: 30,       // 地理围栏高度
        data: {           // 地理围栏数据
          name: 'name',
          coordinate: fenceData // 组成围栏的点位坐标，形如[[经度,纬度,高度],[经度,纬度,高度]...]
        },
      });
    }
    笔记

    有关三维地理围栏的更多信息，请访问addGeoFencing。

2、添加监控图标与视频​

  • 首先，定义一个变量，用于存放监控标签数据。

    constructor(map, layer, group) {
      
      // ...省略相关已有代码
      
      this.videoMarkers = []; // 存放监控标签的数组
    }

  • 添加监控图标与视频，注意这里为了示意，用的都是同样的视频，大家可以换成动态的。

    addMonitorMarker(monitorDatas) {
      let self = this;
      // 获取三维图层
      let modelLayer = this._layer;

      // 创建一个新数组，长度与传入的数据相同
      let datas = new Array(monitorDatas.length);
      // 遍历数组
      for (let i = 0; i < monitorDatas.length; i++) {
        // 为每个数据项创建一个新的对象
        datas[i] = {
          id: `monitor${i}`,
          // 创建作为标记的DOM元素
          element: self.createDeviceDom( 'cameraInfo', './assets/images/camera4.png', '35px', '50px', 'cameraClass' ),
          position: monitorDatas[i], // 标签位置
        };
      }

      // 将监控标签添加到场景中
      let monitorMarker = modelLayer.addMarker({
        id: 'marker_monitor',
        data: datas,
      });

      self.markerData.push(monitorMarker);

      // 遍历监控标签
      monitorMarker.element.children.forEach((dom, index) => {
        // 为每个标签添加点击事件
        dom.element.addEventListener('click', (e) => {
          // 如果已存在监控视频弹框，则删除
          if (self.videoMarkers.length > 0) {
            self.videoMarkers.forEach((m) => {
              if (m.remove) m.remove();
              m = null;
            });
            self.videoMarkers = [];
          }
          
          // 创建视频弹窗标签并设置样式
          let dom = self.createDeviceDom( 'videopop', './assets/images/ui/video.png', '320px', '160px' );
          dom.style.paddingTop = '40px';
          dom.style.paddingBottom = '15px';
          dom.style.backgroundColor = 'rgba(0,0,0,0.5)';
          
          // 创建弹窗关闭元素
          let closeIcon = document.createElement('div');
          closeIcon.className = 'closeVideo';

          // 创建视频元素并设置样式
          const video = document.createElement('video');
          video.src = './assets/images/ui/videoexample.mp4';
          video.controls = false;
          video.autoplay = true;
          video.muted = true;
          video.loop = true;
          video.height = 160;
          video.width = 320;
          dom.appendChild(video);
          dom.appendChild(closeIcon);
          video.style.opacity = 1.0;

          // 将视频弹框添加到场景中
          let cameraMarker = modelLayer.addMarker({
            id: 'marker_video',
            data: [
              {
                name: 'video',
                element: dom,
                position: datas[index].position,
              },
            ],
          });
          self.videoMarkers.push(cameraMarker);

          // 为视频弹框的关闭按钮添加点击事件
          cameraMarker.element.children[0].element.addEventListener(
            'click',
            (e) => {
              // 获取当前点击的目标子元素
              let target = e.target; 
              // 如果点击的是关闭图标，则删除视频弹框
              if (target.className == 'closeVideo') {
                if (self.videoMarkers.length > 0) {
                  self.videoMarkers.forEach((m) => {
                    if (m.remove) m.remove();
                    m = null;
                  });
                  // 清空视频标签数组
                  self.videoMarkers = [];
                }
              }
            }
          );
        });
      });
    }
    笔记

    有关三维标签的更多信息，请访问addMarker。

3、移除三维地理围栏​

  • 关于移除三维地理围栏的代码如下。

    removeFence() {
      this._layer.removeModel(this.fence);
    }

4、调用方法​

  • 在 LyBottom.vue 中定义监控标签数据。

    var monitorData = [
      [120.72859280417336, 31.287819536766325, 16.61136703401467],
      [120.72903709929072, 31.287816041953096, 17.753007312637767],
      [120.72996483598551, 31.287815367533703, 21.220148879042075],
      [120.73057112450243, 31.288328793535406, 22.856333422502818],
      [120.73030159329818, 31.288916335578875, 21.168314064335178],
      [120.72855965306707, 31.288364164704344, 25.369974683089666],
      [120.72894653602232, 31.288950980748243, 12.14282479806209],
      [120.72934200510562, 31.287979641573436, 9.59280601642283],
    ];

  • 将 LyBottom.vue 中关于 addMonitorMarker 和 removeFence 方法的注释去掉。

5、查看效果​

  • 运行，查看效果。

    npm run dev
    show