Skip to main content

Step 10. Security management-escape path

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 escape path function in security management can plan the best path for personnel to escape.

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.

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

2. Add escape route​

  • The escape path uses the interface for adding three-dimensional dynamic lines. Because we want to add multiple dynamic lines, we need to first define an array to store three-dimensional dynamic line objects.

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

      this.escapeData = []; // Store data related to escape routes
    }

  • Add three-dimensional dynamic lines in the addEacapePaths method.

    //Define three-dimensional dynamic line data
    let escapeData1 = [
      [120.72912408169769, 31.288777823525844, 49.66790375069851],
      [120.72912646486824, 31.288825157041767, 49.667880579989806],
      [120.72969712467675, 31.288825157041767, 49.66787609571898],
      [120.7296976531374, 31.28886637805557, 49.66786052241564],
    ];

    //Add 3D dynamic lines to the scene
    let escapePath1 = this._layer.addFlowLine({
      type: 'image', //Set the line type to dynamic pattern line
      color: '#31FF6D', // Line color
      speed: 3, // Line flow speed
      opacity: 1, // The opacity of the line
      width: 0.8, // line width
      textureFactor: 5, // The compression coefficient of the texture in the flow direction. The larger the value, the greater the compression strength.
      towards: 'ground', // Set the line to always touch the ground
      image: './assets/images/arrow.png', // Pattern path of the line
      data: { // line data
        name: 'escapePath1',
        coordinate: escapeData1,
      },
    });

    //Save the line object into the array
    this.escapeData.push(escapePath);

    //...The rest of the three-dimensional dynamic line code is omitted and can be copied directly from the source code. Note that the parameter names for storing escape route-related data are different.
    notes

    For more information about 3D dynamic lines, visit addFlowLine.

3. Add geofence​

  • Add 3D geofences where danger alerts occur to frame the danger zone.
    addFence() {
      let fence = this._layer.addGeoFencing({
        type: 'fade', // Set the type of geofence
        color: 'red', // Color of geofence
        speed: 5, // Geofence change speed
        opacity: 0.8, // Geofence opacity
        height: 6, // Geofence height
        data: { // Geofence data
          coordinate: [ // The coordinates of the points that make up the fence, in the form [[longitude, latitude, height], [longitude, latitude, height]...]
            [120.72908215209354, 31.288774301835325, 49.16790547759789],
            [120.7291863843323, 31.288773693691667, 49.167905767898546],
            [120.72918654725214, 31.288734379872416, 49.16792501262373],
            [120.72908229567228, 31.288734390678137, 49.16792501473103],
            [120.72908215209354, 31.288774301835325, 49.16790547759789],
          ],
        },
      });
      this.escapeData.push(fence);
    }
    notes

    For more information about 3D geofencing, visit addGeoFencing.

4. Add warning and exit labels​

  • Add labels for hazard alerts and safe exits.

    addPoi() {
      let iconPoints = [
        {
          // Create a DOM element as a markup
          element: this.createDeviceDom( 'risk', './assets/images/ui/risk_point.png', '45px', '80px' ),
          position: [120.7291252391534, 31.288767893626222, 49.167908611462266], // Alert label position
        },
        {
          // Create a DOM element as a markup
          element: this.createDeviceDom( 'save', './assets/images/ui/poi_export.png', '45px', '80px' ),
          position: [120.72968937012978, 31.28889593893625, 49.16784609320031], // Safety exit label position
        },
      ];

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

    For more information about 3D labels, visit addMarker.

5. Clear the escape path​

  • The code to clear the escape path is as follows.

    removeEacapePaths() {
      // Traverse the array storing escape path data
      if (this.escapeData.length > 0) {
        this.escapeData.forEach((e) => {
          //Remove related data
          this._layer.removeModel(e);
        });
        this.escapeData = [];
      }
    }

7. Clear warning and exit tags​

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

8. Call method​

  • Call methods for adding geofences and adding alert and egress tags in the addEacapePaths method.

    addEacapePaths() {
      // ...Relevant existing code is omitted

      this.addFence() // Add geofence
      this.addPoi() // Add label
    }

  • Remove the comments about the addEacapePaths and removeEacapePaths methods in LyBottom.vue.

9. Check the effect​

  • Run and see the effect.

    npm run dev
    show