Step 6. Park situation

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 main function of the park status is to query the attribute information of buildings and equipment in the park, including building occupancy rate, number of building floors, number of parking spaces, etc. Note that for the sake of illustration, all pictures are used here, you can change them to dynamic ones by yourself.

1. Add a function called when drawing each frame

Add the funcRender parameter in the 3D layer configuration of the Map.vue file.

//Layer parameters
let options = {
  id: 'model_id',
  models: models_obj,
  outline: true, 
  type: 'model',
  center: [120.73014920373011, 31.287414975761724, 0.1],
  funcRender: function (gl, matrix) {
    if (modelLayer) {
      // Calculate the position of the 3D label in the scene in real time
       modelLayer.renderMarker(gl, matrix);
    }
  },
  callback: function (group, layer) {
    // ...Relevant existing code is omitted
  },
};

2. Add occupancy rate tag

Add the following code in the MapApi.js file.

// Enterprise occupancy rate label
addBuildMarker(datas, callback, glcallback) {
  let self = this;
  let modelLayer = this._layer;

  //Add 3D label
  let buildMarker = modelLayer.addMarker({
    id: 'marker_building', // 3D label id
    data: datas, // 3D label data
  });

  //Callback function is used to subsequently delete tags
  callback && callback(buildMarker);
}

notes

For more information about 3D labels, visit addMarker.

3. Add building information pop-up box

Add the following code in the addBuildMarker method.

addBuildMarker(datas, callback, glcallback) {
  let self = this;
  let modelLayer = this._layer;
  let modelGroup = this._group;

  //...Omit the code to add the occupancy rate label

  // After one and a half seconds, the specified building will be highlighted and an information pop-up will be displayed.
  setTimeout(() => {
    // flight positioning
    let locations = [
      {
        center: [120.72936795194528, 31.288789265001512],
        zoom: 18.210369573475237,
        bearing: 17.316502535111795,
        pitch: 68.42520029251081,
        speed: 0.2,
        curve: 1,
      },
    ];
    self.changeViewers(locations);

    //Model outline effect
    modelLayer.outlineModel([modelGroup.children[0].children[1]], {
      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
    });

    //Building information pop-up box
    let infoData = [
      {
        id: 'buildInfo',
        // Create a DOM element as a markup
        element: self.createDeviceDom( 'buildInfo', './assets/images/ui/enterprise_pop_up.png', '300px', '235px' ),
        position: [120.72951145062459, 31.2882915516911, 29.945361752049791],
      },
    ];

    //Add the information pop-up box to the scene
    let glMarker = modelLayer.addMarker({
      id: 'marker_gl',
      data: infoData,
    });
    glcallback && glcallback(glMarker);
  }, 1500);
}

// Create a DOM element as a markup
createDeviceDom(id,imageUrl = './assets/images/device.png',w = '50px',h = '70px',name) {
  let container = document.createElement('div');
  container.setAttribute('id', id);
  container.className = name || 'markerDevice';
  container.style.width = w;
  container.style.height = h;
  container.style.backgroundImage = 'url(' + imageUrl + ')';
  container.style.backgroundRepeat = 'no-repeat';
  container.style.backgroundSize = '100% 100%';
  container.style.margin = '0px';
  container.style.backgroundPosition = 'center 0';
  return container;
}

notes

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

If there is highlighting, there will be cancellation of highlighting, so next we have to write a method to cancel model highlighting.
```
// Cancel model height
removeBuildHighlight() {
  this._layer.unOutlineModel();
}
```

4. Call method

Define occupancy rate label data in LyBottom.vue.

var buildMarkerData = [
  {
    name: 'a',
    element: creatBuildMDom('Occupancy rate: 59%'),
    position: [120.73016788428845, 31.288121997558775, 40.124491065738916],
  },
  {
    name: 'b',
    element: creatBuildMDom('Occupancy rate: 66%'),
    position: [120.73009953932844, 31.288709048860824, 37.730181271240426],
  },
  //...the remaining data is omitted and can be copied from the source code
];

Remove the comments about the addBuildMarker and removeBuildHighlight methods in LyBottom.vue.

5. Check the effect

Run and see the effect.
```
npm run dev
```

Step 6. Park situation

Prerequisites​

Resource acquisition​

Steps​

1. Add a function called when drawing each frame​

2. Add occupancy rate tag​

3. Add building information pop-up box​

4. Call method​

5. Check the effect​