Step 14. Equipment Management-Street Light 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 street light equipment module in device management can view street light equipment status information.

1. Add flight positioning

• Note that for the sake of illustration, only specific street light equipment can be viewed, so you need to fly to the street light first.

  viewLampDeviceMarker() {
    let self = this;
    let locations = [
      {
        center: [120.72972234736437, 31.28788940180162], // Center point coordinates after the flight ends
        zoom: 20.791587499232204, // Map level after the flight
        bearing: 15.996875838980145, // Map azimuth after flight
        pitch: 71.92451688228758, // Map tilt angle after flight
        speed: 0.5, // flight speed
        curve: 1,// The scaling curve that appears along with the flight path, a value of 1 will cause 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 viewLampDeviceMarker method.

  viewLampDeviceMarker() {
    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 lamp, highlight the model and display device information
        if (name === 'lamp') {
          //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( 'lampInfo', './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( 'lamp_popup', './assets/images/ui/info2.png', '186px', '174px' ),
              // label position
              position: [120.72899263560224, 31.28773094876935, 7.307616348151091],
            },
          ];
  
          //Add tags to the scene
          let marker = modelLayer.addMarker({
            id: 'marker_lamp',
            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 viewLampDeviceMarker method in LyBottom.vue.

5. Check the effect

• Run and see the effect.

  npm run dev