Step 13. Equipment Management-Parking Lot Equipment

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 parking lot equipment module in equipment management can view geomagnetic equipment status information.

1. Add flight positioning

• Note that for the sake of illustration, only specific geomagnetic devices can be viewed, so you must first fly to the geomagnetic location.

  viewCarDeviceMarker() {
    let self = this;
    let locations = [
      {
        center: [120.72899158044368, 31.287906942314947], // Center point coordinates after the flight ends
        zoom: 21.640175311136503, // Map level after flight
        bearing: 0, // Map azimuth after flight
        pitch: 67.42539555257444, // Map tilt angle after flight
        speed: 0.7, // flight speed
        curve: 1, // A scaling curve that appears along the flight path, a value of 1 will result in circular motion
      },
    ];
    this.changeViewers(locations);
  }
  notes

  For more information about fly positioning, visit flyTo.

2. Add map click listening event

• Add map click listening events in the viewCarDeviceMarker method.

  viewCarDeviceMarker() {
    let self = this;
    
    // ...omit flight positioning code
  
    let modelLayer = this._layer;
    let modelGroup = this._group;
    //Add click event to map
    this._map.on('click', (e) => {
      if (modelLayer) {
        selectObj(e.point);
      }
    });
  
    //Define click event
    function selectObj(point) {
      // Get the mouse click model
      let intersect = modelLayer.selectModel(point)[0];
  
      // Calculate the objects that intersect with the extraction ray
      if (intersect) {
        let nearestObject = intersect.object;
        let name = nearestObject.parent.name; // Get the object name
        // If the name is dc001, highlight the model and display device information
        if (name === 'dc001') {
          //Model outline effect
          modelLayer.outlineModel([modelGroup.children[0].children[12]], {
            scope: 'default', // model outline range
            edgeStrength: 3.0, // Contour strength coefficient
            edgeGlow: 0.0, // outline glow dilution
            edgeColor: '#00C1FF', // outline color
            enableFillColor: true, // Whether to fill the inside of the outline
            fillColorOpacity: 0.2, // Fill color opacity inside the outline
          });
  
          //Add device label
          let datas = [
            {
              id: 'arrow_marker',
              // Create a DOM element as a markup
              element: self.createDeviceDom( 'dc_marker', './assets/images/device.png', '50px', '70px' ),
              // label position
              position: [ 120.7289854143069, 31.28773088346361, 7.307616348151091],
            },
            {
              id: 'info_marker',
              // Create a DOM element as a markup
              element: self.createDeviceDom( 'dc_popup', './assets/images/ui/info.png', '186px', '174px' ),
              // label position
              position: [120.72899263560224, 31.28773094876935, 7.307616348151091],
            },
          ];
  
          //Add tags to the scene
          let marker = modelLayer.addMarker({
            id: 'marker_car',
            data: datas,
          });
          self.markerData.push(marker);
        }
      }
    }
  }

notes

• For more information about model outline highlighting, visit outlineModel.
• For more information about 3D labels, visit addMarker.

3. Call method

• Remove the comments about the viewCarDeviceMarker method in LyBottom.vue.

5. Check the effect

• Run and see the effect.

  npm run dev