跳到主要内容
版本：9.4.0

步骤七、安防管理-分层分户

先决条件​

授权

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

资源获取​

注意

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

步骤​

  • 安防管理中的分层分户功能可以查看分层动画以及楼层的属性信息，比如楼层数。注意，这里为了示意，只做了一层楼的分层动画，且属性信息用的是图片，可以自己改成动态的哦。

1、引入tween.js文件​

  • 将开源库中 public->libs 文件复制到工程中相同位置，里面包含了 tween.js 文件。

  • 在 index.html 文件中引入，代码如下。

    <!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="UTF-8">
        <link rel="icon" href="/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mapmost智慧园区3D可视化系统</title>
        <!-- 引入文件 -->
        <script src="./libs/tween.umd.js"></script>
      </head>
      <body>
        <div id="app"></div>
        <script type="module" src="/src/main.js"></script>
      </body>
    </html>

2、引入Three.js接口​

  • 在 Map.vue 文件中的 onMounted 中添加以下代码。

    // 将 mapmost.THREE 对象赋值给 window.THREE ，以便在全局作用域下访问 THREE
    window.THREE = mapmost.THREE;

3、添加楼层动画​

  • 首先，记录模型原始位置。

    constructor(map, layer, group) {
      this._map = map;
      this._layer = layer;
      this._group = group;
      this.shouldRotate = true;

      // 记录楼层模型原始位置
      let floorModel = this._group.children[0].children[3];
      this.originalZPosition = floorModel.position.z;
    }

  • 然后，添加楼层平移动画方法。

    // 楼层平移
    floorPanning() {

      // 飞行定位
      let locations = [
        {
          center: [120.72893418497381, 31.289093070022545],
          zoom: 18.47807755785181,
          bearing: -43.624945530783634,
          pitch: 49.98152219360618,
          speed: 0.2,
          curve: 1,
        },
      ];
      this.changeViewers(locations);

      let self = this;
      // 指定的楼层模型对象
      let model = this._group.children[0].children[3];

      const tween = new TWEEN.Tween({ z: 0 }, false)
        // 设置动画的目标值以及动画持续时间
        .to({ z: 1 }, 1000) 
        // 设置动画的缓动函数为二次方缓动，速度的变化在动画开始和结束时较慢，在中间时较快
        .easing(TWEEN.Easing.Quadratic.InOut) 
        // 在动画更新时调用此函数，val参数为当前动画的插值
        .onUpdate((val) => {
          // 根据动画的当前插值更新模型的位置
          model.translateZ(val.z);
        })
        // 开始动画
        .start();

      // 定义一个动画循环函数
      function animate(time) {
        // 更新动画，传入当前时间
        tween.update(time);
        // 实现动画循环
        requestAnimationFrame(animate);
      }
      // 调用动画循环函数
      animate();
    }
    笔记

    有关 tween.js 的更多信息，请访问tween.js 用户指南。

4、添加楼层标签与高亮​

  • 首先，定义标签数组，用于存放标签数据。

    constructor(map, layer, group) {
      this._map = map;
      this._layer = layer;
      this._group = group;
      this.shouldRotate = true;

      // 记录楼层模型原始位置
      let floorModel = this._group.children[0].children[3];
      this.originalZPosition = floorModel.position.z;

      // 存放标签的数组
      this.markerData = [];
    }

  • 然后，编写添加楼层标签的方法，方法和之前加载建筑弹框的方法一样，这里就不细说了。

    // 添加楼层标签
    addFloorMarker() {
      let floorPoints = [
        {
          // 设置标签路径和样式
          element: this.createDeviceDom( 'nine', './assets/images/ui/poi_9f.png', '126px', '172.5px' ),
          // 标签点位坐标
          position: [120.729291104735, 31.288659449974343, 52.75000000007335], 
        },
      ];

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

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

  • 在楼层平移 floorPanning 方法中添加标签与模型轮廓高亮方法。

    // 楼层平移
    floorPanning() {
      // ...已有代码省略
      // 调用动画循环函数
      animate();

      let self = this;

      // 两秒后执行
      setTimeout(() => {
        // 添加楼层信息标签
        self.addFloorMarker();

        // 模型轮廓高亮效果
        this._layer.outlineModel([model], {
          scope: 'default',      // 模型轮廓范围
          edgeStrength: 8.0,     // 轮廓强度系数
          edgeGlow: 0.0,         // 轮廓发光稀释
          edgeColor: '#ffff00',  // 轮廓颜色
          enableFillColor: true, // 轮廓内部是否填充
          fillColorOpacity: 0.4, // 轮廓内部填充颜色不透明度
        });
      }, 2000);
    }

4、移除标签​

  • 添加移除标签方法。

    // 移除标签
    removeMarker() {
      for (let i = 0; i < this.markerData.length; i++) {
        this.markerData[i].remove();
      }
      this.markerData = [];
    }

5、恢复楼层位置​

  • 添加恢复楼层位置方法。

    removeFloorPanning() {
      let model = this._group.children[0].children[3];
      // 将模型的位置设置为最初记录的位置
      model.position.z = this.originalZPosition;
    }

6、调用方法​

  • 将 LyBottom.vue 中关于 floorPanning 、removeMarker 、 removeFloorPanning方法的注释去掉。

7、查看效果​

  • 运行，查看效果。

    npm run dev
    show