Skip to main content

Step 9. Security Management-Security Alert

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 security warning function in security management can perform fire warning and send warning notifications to relevant personnel.

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.

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

2. Add diffusion circle effects​

  • Because the warning special effect is composed of three three-dimensional effect circles, we need to first define an array to store the special effect circle objects.

    constructor(map, layer, group) {
      
      // ...Existing code is omitted

      this.circleData = []; // Store three-dimensional effect circle data
    }

  • Add a three-dimensional diffusion circle effect in the addSecurityWarning method.

    let circle_spread = this._layer.addCircle({
      type: 'spread', // Set the circle type to spread circle
      color: 'red', // color of diffuse circle
      radius: 45, // Radius of the diffusion circle
      segment: 256, //The number of patches that make up the diffusion circle
      speed: 3, // The speed at which the diffusion circle changes
      opacity: 0.8, // Diffusion circle opacity
      center: [120.7293385335865, 31.288814045160496, 52.95], // Center coordinates of the diffusion circle
    });

    //Save the diffuse circle object into the array
    this.circleData.push(circle_spread);

3. Add radar circle special effects​

  • Add a three-dimensional radar circle special effect in the addSecurityWarning method.

    let circle_radar = this._layer.addCircle({
      type: 'radar', // Set the circle type to radar circle
      color: 'yellow', // Color of radar circle
      radius: 45, // Radius of radar circle
      segment: 256, //The number of patches that make up the radar circle
      isCW: true, // Set the radar circle to rotate clockwise
      speed: 3, // Radar circle change speed
      opacity: 0.8, // Radar circle opacity
      center: [120.7293385335865, 31.288814045160496, 52.85], // Center coordinates of the radar circle
    });

    //Save the radar circle object into the array
    this.circleData.push(circle_radar);

4. Add water ripple effects​

  • Add three-dimensional water ripple effects in the addSecurityWarning method.

    let circle_ripple = this._layer.addCircle({
      type: 'ripple', // Set the circle type to water ripple
      color: 'yellow', // color of water ripples
      radius: 45, // Radius of water ripples
      turns: 5, // The number of stripes that make up the water ripples
      speed: 0.05, // water ripple change speed
      opacity: 1.0, // water ripple opacity
      center: [120.7293385335865, 31.288814045160496, 52.75], // The center coordinates of the water ripple
    });

    //Save the water ripple object into the array
    this.circleData.push(circle_ripple);
    notes

    For more information about 3D effect circles, visit addCircle.

5. Add early warning notification information​

  • Note that for the sake of illustration, only one picture tag is added here. You can change it to dynamic one by yourself.

    addWarnPicture() {
      let warnPoints = [
        {
          // Create a DOM element as a markup
          element: this.createDeviceDom( 'yj', './assets/images/ui/warning.png', '265.2px', '289.2px' ),
          position: [120.72994108596296, 31.28834145014008, 52.75], // label position
        },
      ];

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

    For more information about 3D labels, visit addMarker.

6. Clear the three-dimensional effect circle​

  • The code to clear the three-dimensional effect circle is as follows.

    removeSecurityWarning() {
      // Traverse the array storing three-dimensional effect circle data
      if (this.circleData.length > 0) {
        for (let i = 0; i < this.circleData.length; i++) {
          // Remove the 3D effect circle
          this._layer.removeModel(this.circleData[i]);
        }
      }
    }

7. Clear warning notification information​

  • The method of clearing labels removeMarker has been written in the previous steps, just call it directly.

8. Call method​

  • Remove the comments about the addSecurityWarning, addWarnPicture and removeSecurityWarning methods in LyBottom.vue.

9. Check the effect​

  • Run and see the effect.

    npm run dev
    show