Step 5. Park Overview

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

1. Create MapApi.js file

• Create a new MapApi.js file in the src->api folder, and all interactive functions will be written in this file.

2. Add park overview function

• The main function of the park overview is to automatically rotate the model 360 degrees. We can change the azimuth of the map every frame to achieve this.

  // This class is mainly used for map and scene related operations
  class MapApi {
    constructor(map, layer, group) {
      this._map = map; // Map instance
      this._layer = layer; // 3D layer instance
      this._group = group; // 3D model object
      this.shouldRotate = false; // Control rotation start/stop
    }
  
    // Park overview
    overView(rotating) {
      let self = this;
      this.shouldRotate = rotating; // Update rotation status
  
      // Call the model rotation method
      rotateCamera(0);
      //Define model rotation method
      function rotateCamera(timestamp) {
        // If rotation is allowed, update the map azimuth
        if (self.shouldRotate) {
          map.setBearing((timestamp / 360) % 360); // Set the azimuth of the map to achieve the rotation effect
          requestAnimationFrame(rotateCamera); // Use this function to recursively call rotateCamera to achieve smooth animation
        }
      }
    }
  
    // Stop rotating
    stopRotation() {
      this.shouldRotate = false;
    }
  }
  
  // Export the MapApi class so that it can be used in other modules
  export default MapApi;

• Because we only changed the azimuth angle of the map, when we zoom the map to other places and click on the model overview, it may not rotate around the park model, so we can fly to a fixed perspective before each rotation.

  // Park overview
  overView(rotating) {
    let self = this;
    this.shouldRotate = rotating;
  
    let location = [{
        center: [120.72954958448429, 31.28847184284129], // Center point coordinates after the flight ends
        zoom: 17.587263673261667, // Map level after flight
        bearing: 0, // Map azimuth after flight
        pitch: 48.49773165778813, // Map pitch angle after flight
        speed: 0.2, // flight speed
        curve: 1, // A scaling curve that appears along the flight path, a value of 1 will result in circular motion
    }]
    
    //Call flight positioning method
    this.changeViewers(location);
  
    //Start rotating after two seconds
    setTimeout(() => {
      rotateCamera(0);
      function rotateCamera(timestamp) {
        if (self.shouldRotate) {
          map.setBearing((timestamp / 360) % 360);
          requestAnimationFrame(rotateCamera);
        }
      }
    }, 2000);
  }
  
  // flight positioning
  changeViewer(location) {
    this._map.flyTo({
      ...location,
    });
  }
  
  //continuous flight
  changeViewers(locations) {
    let count = 0;
    this.changeViewer(locations[count]);
    let self = this;
    let moveFunc = function () {
      if (count === locations.length - 1) {
        self._map.off('moveend', moveFunc);
        return;
      }
      self.changeViewer(locations[count++]);
    };
    if (count < locations.length - 1) {
      self._map.on('moveend', moveFunc);
    }
  }

notes

• In the following steps, flight positioning is used for better visual effects.
• For more information about fly positioning, please visit flyTo.

3. Call method

• Remove comments about overView, stopRotation and changeViewers methods in LyBottom.vue.

4. Check the effect

• Run and see the effect.

  npm run dev