跳到主要内容
版本：9.4.1

步骤九、安防管理-安防预警

先决条件​

授权

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

资源获取​

注意

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

步骤​

  • 安防管理中的安防预警功能可进行消防预警，并向相关人员发送预警通知。

1、添加顶层动画​

  • 顶层动画的 topAnimation 方法在步骤八已经写好啦，这里可以直接调用。

    addSecurityWarning() {
      // 调用顶层动画方法
      this.topAnimation()
    }

2、添加扩散圆特效​

  • 因为预警特效是由3个三维特效圆组成的，所以我们需要先定义一个数组存放特效圆对象。

    constructor(map, layer, group) {
      
      // ...已有代码省略

      this.circleData = [];  // 存放三维特效圆数据
    }

  • 在 addSecurityWarning 方法中添加三维扩散圆特效。

    let circle_spread = this._layer.addCircle({
      type: 'spread',  // 设置圆类型为扩散圆
      color: 'red',    // 扩散圆的颜色
      radius: 45,      // 扩散圆的半径
      segment: 256,    // 构成扩散圆的面片数
      speed: 3,        // 扩散圆变化的速度
      opacity: 0.8,    // 扩散圆不透明度
      center: [120.7293385335865, 31.288814045160496, 52.95], // 扩散圆的圆心坐标
    });

    // 将扩散圆对象保存到数组中
    this.circleData.push(circle_spread);

3、添加雷达圆特效​

  • 在 addSecurityWarning 方法中添加三维雷达圆特效。

    let circle_radar = this._layer.addCircle({
      type: 'radar',   // 设置圆类型为雷达圆
      color: 'yellow', // 雷达圆的颜色
      radius: 45,      // 雷达圆的半径
      segment: 256,    // 构成雷达圆的面片数
      isCW: true,      // 设置雷达圆顺时针旋转
      speed: 3,        // 雷达圆变化速度
      opacity: 0.8,    // 雷达圆不透明度
      center: [120.7293385335865, 31.288814045160496, 52.85], // 雷达圆的圆心坐标
    });

    // 将雷达圆对象保存到数组中
    this.circleData.push(circle_radar);

4、添加水波纹特效​

  • 在 addSecurityWarning 方法中添加三维水波纹特效。

    let circle_ripple = this._layer.addCircle({
      type: 'ripple',  // 设置圆类型为水波纹
      color: 'yellow', // 水波纹的颜色
      radius: 45,      // 水波纹的半径
      turns: 5,        // 构成水波纹的条纹数
      speed: 0.05,     // 水波纹变化速度
      opacity: 1.0,    // 水波纹不透明度
      center: [120.7293385335865, 31.288814045160496, 52.75], // 水波纹的圆心坐标
    });

    // 将水波纹对象保存到数组中
    this.circleData.push(circle_ripple);
    笔记

    有关三维特效圆的更多信息，请访问addCircle。

5、添加预警通知信息​

  • 注意，这里为了示意，只添加了一个图片标签，大家可以自己改成动态的。

    addWarnPicture() {
      let warnPoints = [
        {
          // 创建作为标记的DOM元素
          element: this.createDeviceDom( 'yj', './assets/images/ui/warning.png', '265.2px', '289.2px' ),
          position: [120.72994108596296, 31.28834145014008, 52.75], // 标签位置
        },
      ];

      // 将标签添加到场景中
      let marker = this._layer.addMarker({
        id: 'warnSevice',
        data: warnPoints,
      });
      this.markerData.push(marker);
    }
    笔记

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

6、清除三维特效圆​

  • 清除三维特效圆的代码如下。

    removeSecurityWarning() {
      // 遍历存放三维特效圆数据的数组
      if (this.circleData.length > 0) {
        for (let i = 0; i < this.circleData.length; i++) {
          // 移除三维特效圆
          this._layer.removeModel(this.circleData[i]);
        }
      }
    }

7、清除预警通知信息​

  • 清除标签的方法 removeMarker 前面步骤已经写过啦，直接调用就行了。

8、调用方法​

  • 将 LyBottom.vue 中关于 addSecurityWarning 、addWarnPicture 、 removeSecurityWarning 方法的注释去掉。

9、查看效果​

  • 运行，查看效果。

    npm run dev
    show