跳到主要内容
版本：9.4.1

步骤十、安防管理-逃生路径

先决条件​

授权

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

资源获取​

注意

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

步骤​

  • 安防管理中的逃生路径功能可规划人员逃生的最佳路径。

1、添加顶层动画​

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

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

2、添加逃生路线​

  • 逃生路径用的是添加三维动态线的接口，因为我们要加多条动态线，所以我们需要先定义一个数组存放三维动态线对象。

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

      this.escapeData = [];  // 存放逃生路线相关数据
    }

  • 在 addEacapePaths 方法中添加三维动态线。

    // 定义三维动态线数据
    let escapeData1 = [
      [120.72912408169769, 31.288777823525844, 49.66790375069851],
      [120.72912646486824, 31.288825157041767, 49.667880579989806],
      [120.72969712467675, 31.288825157041767, 49.66787609571898],
      [120.7296976531374, 31.28886637805557, 49.66786052241564],
    ];

    // 将三维动态线添加到场景中
    let escapePath1 = this._layer.addFlowLine({
      type: 'image',     // 设置线的类型为动态图案线
      color: '#31FF6D',  // 线的颜色
      speed: 3,          // 线的流动速度
      opacity: 1,        // 线的不透明度
      width: 0.8,        // 线宽
      textureFactor: 5,  // 贴图在流动方向上的压缩系数，值越大压缩强度越大
      towards: 'ground', // 设置线始终贴地
      image: './assets/images/arrow.png', // 线的图案路径
      data: {  // 线数据
        name: 'escapePath1',
        coordinate: escapeData1,
      },
    });

    // 将线对象保存到数组中
    this.escapeData.push(escapePath);

    // ...其余三维动态线代码省略，可以从源码中直接复制，注意存放逃生路线相关数据的参数命名有所不同
    笔记

    有关三维动态线的更多信息，请访问addFlowLine。

3、添加地理围栏​

  • 在发生危险警报的地方添加三维地理围栏，将危险区域框起来。
    addFence() {
      let fence = this._layer.addGeoFencing({
        type: 'fade',   // 设置地理围栏的类型
        color: 'red',   // 地理围栏的颜色
        speed: 5,       // 地理围栏变化速度
        opacity: 0.8,   // 地理围栏不透明度
        height: 6,      // 地理围栏高度
        data: {         // 地理围栏数据
          coordinate: [ // 组成围栏的点位坐标，形如[[经度,纬度,高度],[经度,纬度,高度]...]
            [120.72908215209354, 31.288774301835325, 49.16790547759789],
            [120.7291863843323, 31.288773693691667, 49.167905767898546],
            [120.72918654725214, 31.288734379872416, 49.16792501262373],
            [120.72908229567228, 31.288734390678137, 49.16792501473103],
            [120.72908215209354, 31.288774301835325, 49.16790547759789],
          ],
        },
      });
      this.escapeData.push(fence);
    }
    笔记

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

4、添加预警和出口标签​

  • 在发生危险警报和安全出口的地方添加标签。

    addPoi() {
      let iconPoints = [
        {
          // 创建作为标记的DOM元素
          element: this.createDeviceDom( 'risk', './assets/images/ui/risk_point.png', '45px', '80px' ),
          position: [120.7291252391534, 31.288767893626222, 49.167908611462266], // 预警标签位置
        },
        {
          // 创建作为标记的DOM元素
          element: this.createDeviceDom( 'save', './assets/images/ui/poi_export.png', '45px', '80px' ),
          position: [120.72968937012978, 31.28889593893625, 49.16784609320031], // 安全出口标签位置
        },
      ];

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

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

5、清除逃生路径​

  • 清除逃生路径的代码如下。

    removeEacapePaths() {
      // 遍历存放逃生路径数据的数组
      if (this.escapeData.length > 0) {
        this.escapeData.forEach((e) => {
          // 移除相关数据
          this._layer.removeModel(e);
        });
        this.escapeData = [];
      }
    }

7、清除预警和出口标签​

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

8、调用方法​

  • 在 addEacapePaths 方法中调用添加地理围栏和添加预警和出口标签的方法。

    addEacapePaths() {
      // ...相关已有代码省略

      this.addFence() // 添加地理围栏
      this.addPoi() // 添加标签
    }

  • 将 LyBottom.vue 中关于 addEacapePaths 、removeEacapePaths 方法的注释去掉。

9、查看效果​

  • 运行，查看效果。

    npm run dev
    show