Skip to main content

Step 11, Security Management-Personnel Gathering

Prerequisites​

Authorization

You need to have an authorization code first. To obtain the authorization code, please refer to Authorization Application.

Resource acquisition​

Attention

The pictures, models, third-party libraries, source code and other resources involved in the scene can be obtained by click to download.

Steps​

  • The people gathering function in security management displays the gathering of people in each area in the form of a heat map.

1. Add top-level animation​

  • The topAnimation method of the top-level animation has been written in [Step 8] (./stepEight.md#1 Add top-level animation) and can be called directly here.

    addGathering() {
      // Call the top-level animation method
      this.topAnimation()
    }

2. Add three-dimensional heat map​

-Introduce the heatmap.js file into the index.html file, the code is as follows.

<!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 Smart Park 3D Visualization System</title>
    <script src="./libs/tween.umd.js"></script>
    <!--Introduce heatmap.js file -->
    <script src="./libs/heatmap.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

  • Add 3D heat map method in MapApi.js file.

    addGathering() {
      // Call the top-level animation method
      this.topAnimation()
      
      // Define the data boundary range of the 3D heat map layer
      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],
      ];

      // Define the input data of the 3D heat map layer
      let dataPoints = [
        [120.72931726666873, 31.2888265142416, 15],
        [120.72930726666873, 31.2888165142416, 20],
        [120.72931726666873, 31.2888265142416, 25],
        [120.7290244038319, 31.28881399947618, 10],
        //...The rest of the relevant data is omitted and can be copied directly from the source code.
      ];

      // 3D heat map configuration
      let options = {
        id: 'heatmap', // layer id
        type: 'heatmap-3d', // layer type
        data: dataPoints, //Layer input data defined above
        coordinates: coordinates, // The boundary range defined above, data must be within this boundary
        width: 128, //Layer canvas width
        heightRatio: 0.01, // Heat map stretch height
        proj: '4326', // Heat map coordinate system
        blur: 0.85, // Applies to all point data. The higher the coefficient, the smoother the gradient
        radius: 10, // Radius of each data point
        depthTest: false, // Turn off depth testing
        opacity: 0.6, // Heat map opacity
        gradient: { // Gradient ribbon object
          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)',
        }, 
      };

      //Add the heat map to the scene
      this._map.addLayer(options);
    }
notes
  • Three-dimensional heat maps can be used to display the hotspot distribution of geospatial data, such as population density, traffic flow or environmental pollution levels, helping users analyze and understand the data distribution in a region more intuitively from a three-dimensional perspective.
  • For more information about 3D heatmaps, visit addLayer-heatmap-3d.

3. Remove the 3D heat map​

  • The code for removing the three-dimensional heat map is as follows.

    removeGathering() {
      // If there is a layer with the id heatmap
      if (this._map.getLayer('heatmap')) {
        //Remove the heat map
        this._map.removeLayer('heatmap');
      }
    }

4. Call method​

  • Find the bindFunc method in LyBottom.vue and call the addGathering method in the case of crowd.

    function bindFunc(id) {
      switch (id) {
        // ...Omit relevant existing code
        case 'crowd':
          {
            activeItem(id, 'btn_children_active');
            clearRecording();
            let locations = [
              {
                center: [120.72930496741992, 31.288898256241268],
                zoom: 18.932314122092432, // zoom
                bearing: -31.19390788601129,
                pitch: 9.936623006239369,
                speed: 0.5, // speed
                curve: 1, //Motion mode
              },
            ];
            window.mapApi.changeViewers(locations);

            //Call the method to add a three-dimensional heat map
            window.mapApi.addGathering();
          }
          break;
        // ...Omit relevant existing code
      }
    }

  • Find the clearRecording method in LyBottom.vue, and call the method to remove the three-dimensional heat map in this method.

    function clearRecording() {
      // ...Omit relevant existing code
      
      // Clear heat map
      window.mapApi.removeGathering();
    }

5. Check the effect​

  • Run and see the effect.

    npm run dev
    show