Skip to main content

Step 7. Security management - hierarchical household division

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 hierarchical household division function in security management can view hierarchical animation and floor attribute information, such as the number of floors. Note that for the sake of illustration, only one layer of layered animation is done here, and the attribute information uses pictures. You can change it to dynamic by yourself.

1. Introduce the tween.js file​

  • Copy the public->libs file in the open source library to the same location in the project, which contains the tween.js file. -Introduced in 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>
        <!-- Import files -->
        <script src="./libs/tween.umd.js"></script>
      </head>
      <body>
        <div id="app"></div>
        <script type="module" src="/src/main.js"></script>
      </body>
    </html>

2. Introduce Three.js interface​

  • Add the following code in onMounted in the Map.vue file.

    // Assign the mapmost.THREE object to window.THREE to access THREE in the global scope
    window.THREE = mapmost.THREE;

3. Add floor animation​

  • First, record the original position of the model.

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

      //Record the original position of the floor model
      let floorModel = this._group.children[0].children[3];
      this.originalZPosition = floorModel.position.z;
    }

  • Then, add the floor translation animation method.

    // Floor translation
    floorPanning() {

      // flight positioning
      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;
      //Specified floor model object
      let model = this._group.children[0].children[3];

      const tween = new TWEEN.Tween({ z: 0 }, false)
        //Set the target value of the animation and the animation duration
        .to({ z: 1 }, 1000) 
        //Set the easing function of the animation to quadratic easing. The speed changes slowly at the beginning and end of the animation and faster in the middle.
        .easing(TWEEN.Easing.Quadratic.InOut) 
        // This function is called when the animation is updated. The val parameter is the interpolation of the current animation.
        .onUpdate((val) => {
          // Update the model’s position based on the animation’s current interpolation
          model.translateZ(val.z);
        })
        // Start animation
        .start();

      //Define an animation loop function
      function animate(time) {
        //Update animation, pass in the current time
        tween.update(time);
        // Implement animation loop
        requestAnimationFrame(animate);
      }
      //Call animation loop function
      animate();
    }
    notes

    For more information about tween.js, please visit tween.js User Guide.

4. Add floor labels and highlights​

  • First, define a tag array to store tag data.

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

      //Record the original position of the floor model
      let floorModel = this._group.children[0].children[3];
      this.originalZPosition = floorModel.position.z;

      // Array to store tags
      this.markerData = [];
    }

  • Then, write a method to add floor labels. The method is the same as the previous method of loading the building pop-up frame, so I won’t go into details here.

    //Add floor label
    addFloorMarker() {
      let floorPoints = [
        {
          //Set label path and style
          element: this.createDeviceDom( 'nine', './assets/images/ui/poi_9f.png', '126px', '172.5px' ),
          // Label point coordinates
          position: [120.729291104735, 31.288659449974343, 52.75000000007335], 
        },
      ];

      //Add tags to the scene
      let marker = this._layer.addMarker({
        id: 'floorMarker',
        data: floorPoints,
      });
      this.markerData.push(marker);
    }
    notes

    For more information about 3D labels, visit addMarker.

  • Add label and model outline highlighting methods to the floor panning floorPanning method.

    // Floor translation
    floorPanning() {
      // ...Existing code is omitted
      //Call animation loop function
      animate();

      let self = this;

      //Execute after two seconds
      setTimeout(() => {
        //Add floor information label
        self.addFloorMarker();

        // Model outline highlighting effect
        this._layer.outlineModel([model], {
          scope: 'default', // model outline range
          edgeStrength: 8.0, // Contour strength coefficient
          edgeGlow: 0.0, // outline glow dilution
          edgeColor: '#ffff00', // outline color
          enableFillColor: true, // Whether to fill the inside of the outline
          fillColorOpacity: 0.4, // Fill color opacity inside the outline
        });
      }, 2000);
    }

4. Remove tags​

  • Added method to remove tags.

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

5. Restore floor location​

  • Added method to restore floor location.

    removeFloorPanning() {
      let model = this._group.children[0].children[3];
      //Set the model’s position to the originally recorded position
      model.position.z = this.originalZPosition;
    }

6. Call method​

  • Remove the comments about the floorPanning, removeMarker and removeFloorPanning methods in LyBottom.vue.

7. Check the effect​

  • Run and see the effect.

    npm run dev
    show