跳到主要内容
版本：9.4.0

步骤十一、安防管理-人员聚集

先决条件​

授权

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

资源获取​

注意

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

步骤​

  • 安防管理中的人员聚集功能以热力图的形式展示各区域人员聚集情况。

1、添加顶层动画​

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

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

2、添加三维热力图​

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

    <!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>
        <!-- 引入 heatmap.js 文件 -->
        <script src="./libs/heatmap.min.js"></script>
      </head>
      <body>
        <div id="app"></div>
        <script type="module" src="/src/main.js"></script>
      </body>
    </html>

  • 在 MapApi.js 文件中添加三维热力图方法。

    addGathering() {
      // 调用顶层动画方法
      this.topAnimation()
      
      // 定义3D热力图图层的数据边界范围
      let coordinates = [
        [120.72894071804599, 31.28890224791683, 49.66783986666117],
        [120.72894187068678, 31.28873854960851, 49.66792610823635],
        [120.72975352809391, 31.28874233143143, 49.667924115854014],
        [120.72974941148411, 31.28890693108592, 49.667837399409905],
      ];

      // 定义3D热力图图层的输入数据
      let dataPoints = [
        [120.72931726666873, 31.2888265142416, 15],
        [120.72930726666873, 31.2888165142416, 20],
        [120.72931726666873, 31.2888265142416, 25],
        [120.7290244038319, 31.28881399947618, 10],
        // ...其余相关数据省略，可从源码中直接复制
      ];

      // 三维热力图配置
      let options = {
        id: 'heatmap',             // 图层 id
        type: 'heatmap-3d',        // 图层类型
        data: dataPoints,          // 上述定义的图层输入数据
        coordinates: coordinates,  // 上述定义的边界范围，data必须在该边界内
        width: 128,                // 图层画布宽度
        heightRatio: 0.01,         // 热力图拉伸高度
        proj: '4326',              // 热力图坐标系
        blur: 0.85,                // 应用于所有点数据。系数越高，渐变越平滑
        radius: 10,                // 每个数据点的半径
        depthTest: false,          // 关闭深度测试
        opacity: 0.6,              // 热力图不透明度
        gradient: {                // 渐变的色带对象
          0.1: 'rgb(0,102,255)',
          0.2: 'rgb(102,255,255)',
          0.3: 'rgb(102,255,153)',
          0.4: 'rgb(125,255,0)',
          0.5: 'rgb(255,255,0)',
          0.6: 'rgb(255,204,0)',
          0.7: 'rgb(255,128,0)',
          0.8: 'rgb(255,102,0)',
          0.9: 'rgb(255,0,0)',
        }, 
      };

      // 将热力图添加至场景中
      this._map.addLayer(options);
    }
笔记
  • 三维热力图可用于展示地理空间数据的热点分布，如人口密度、交通流量或环境污染程度，帮助用户从立体角度更直观地分析和理解区域内的数据分布情况。
  • 有关三维热力图的更多信息，请访问addLayer-heatmap-3d。

3、移除三维热力图​

  • 关于移除三维热力图的代码如下。

    removeGathering() {
      // 如果存在id为heatmap的图层时
      if (this._map.getLayer('heatmap')) {
        // 移除该热力图
        this._map.removeLayer('heatmap');
      }
    }

4、调用方法​

  • 在 LyBottom.vue 中找到 bindFunc 方法，在 crowd 情况下调用 addGathering方法。

    function bindFunc(id) {
      switch (id) {
        // ...省略相关已有代码
        case 'crowd':
          {
            activeItem(id, 'btn_children_active');
            clearRecording();
            let locations = [
              {
                center: [120.72930496741992, 31.288898256241268],
                zoom: 18.932314122092432, // 缩放
                bearing: -31.19390788601129,
                pitch: 9.936623006239369,
                speed: 0.5, // 速度
                curve: 1, // 运动方式
              },
            ];
            window.mapApi.changeViewers(locations);

            // 调用添加三维热力图方法
            window.mapApi.addGathering();
          }
          break;
        // ...省略相关已有代码
      }
    }

  • 在 LyBottom.vue 中找到 clearRecording 方法，在该方法中调用移除三维热力图的方法。

    function clearRecording() {
      // ...省略相关已有代码
      
      // 清除热力图
      window.mapApi.removeGathering();
    }

5、查看效果​

  • 运行，查看效果。

    npm run dev
    show