Step 3. Add mobile vehicles

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 CarApi.js file

Create a new CarApi.js file in the api folder.

2. Add mobile vehicles

In the CarApi.js file, add the moving vehicle code.

The main implementation idea is: first pre-prepare the movement route, and then match the models of different vehicles to make them move along the route.

// This class is mainly used for vehicle animation
class CarApi {
  constructor(map) {
      this._map = map;
  }

  initCar() {
      // Define vehicle driving path and animation duration data
      let carPaths = [
          {
              duration: 30000,
              coord: [
                  [120.73298001334099, 31.287590355901955, 7.067983162869322],
                  [120.73085428179544, 31.287592792848983, 7.0679829437293495],
                  [120.72971212935782, 31.28758512524997, 7.067983633230293],
                  [120.72890788261878, 31.28758946244285, 7.067983243212716],
                  [120.7283663988581, 31.28760327386899, 7.0679820012342764],
                  [120.72834815296547, 31.28782738454053, 7.0679618482571005],
                  [120.728348563117, 31.28840236435959, 7.067910143187581],
                  [120.72835201823979, 31.289045220115707, 7.0678523335926435],
                  [120.72835265516758, 31.289209016908583, 7.067837603832728],
                  [120.72880615082413, 31.289210420967702, 7.067837477569624],
                  [120.72933061455416, 31.289183750889126, 7.0678398759344505],
                  [120.73313241566966, 31.288999315639824, 7.067856461636449],
              ],
          },
          {
              duration: 30000,
              coord: [
                  [120.72580406892274, 31.287413307358513, 7.06799908374595],
                  [120.72777667112805, 31.287408709639475, 7.067999497189458],
                  [120.7288786165383, 31.287407894317642, 7.0679995705061724],
                  [120.73022410851547, 31.2874040578806, 7.06799991549241],
                  [120.7321998181452, 31.287408173146385, 7.06799954543285],
                  [120.73386789470727, 31.28740523173713, 7.067999809935006],
                  [120.73463063008647, 31.287399692031354, 7.068000308085265],
                  [120.73547239297935, 31.28740558706819, 7.067999777982395],
              ],
          },
          //... Reference source code is complete, and custom paths can also be added.
      ];

      //Array of vehicle model names to be added
      let models = [ 'SM_Bus_01', 'SM_Taxi', 'SM_Tesla', 'SM_Tesla', 'SM_Bus_01', 'SM_Ford_Fiesta', 'SM_Car', 'SM_Tesla', 'SM_Taxi'];

      for (let i = 0; i < carPaths.length; i++) {

          //Set model resources
          let model = [
              {
                  type: 'glb',
                  url: './assets/models/cars/' + models[i] + '.mm', // Set model path
                  // Because the model we provide is encrypted, you need to set this parameter. If you are loading your own model, you do not need to set it.
                  decryptWasm:'https://delivery.mapmost.com/cdn/b3dm_codec/0.0.2-alpha/sdk_b3dm_codec_wasm_bg_opt.wasm', 
              },
          ];

          // Generate random id
          let uuid = this._getuuid();
          let option = {
              id: uuid,
              type: 'model', // Set layer type
              models: model, // Set model resources
              center: [120.73062035254365, 31.288398677612456, 0.9999941344157874], // Set the model center point
              callback: function (group, layer) { // Model callback function
                  
                  //Adjust the rotation angle of the specified model to ensure that all vehicles are traveling in the correct direction
                  if (i == 7) {
                      group.setRotation({ x: 100, y: 100, z: 100 });
                  }

                  // Vehicle movement animation
                  group.followPath(
                      { 
                          path: carPaths[i].coord, // vehicle movement path
                          duration: carPaths[i].duration // Duration of vehicle movement animation
                      }  
                  );
              },
          };

          //Add the model to the map
          this._map.addLayer(option);
      }
  }

  // Randomly generate id
  _getuuid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
      /[xy]/g,
      function (c) {
          var r = (Math.random() * 16) | 0,
          v = c == 'x' ? r : (r & 0x3) | 0x8;
          return v.toString(16);
      }
      );
  }
}

// Export the CarApi class so that it can be used in other modules
export default CarApi;

-Introduce the CarApi class into the Map.vue file

import CarApi from '../api/CarApi';

3. Call the moving vehicle method

Called in the callback function of the added campus model.

let options = {
  id: 'model_id',
  models: models_obj,
  outline: true, 
  type: 'model',
  center: [120.73014920373011, 31.287414975761724, 0.1],
  callback: function (group, layer) { // Model callback function
      modelLayer = layer;
      
      //Call the moving vehicle method
      let car = new CarApi(map);
      car.initCar();

      //Place the car every 10 seconds, 5 times
      let count = 0;
      setInterval(function () {
        if (count < 5) {
          car.initCar();
          count++;
        }
      }, 10000);
  },
};

notes

For more information about model animation, please visit Object3D Method in Add Model. For related examples, please refer to Model Animation.

4. Check the effect

Run and check the effect. At this time, the effect of moving vehicles can be seen in the scene.
```
npm run dev
```

Step 3. Add mobile vehicles

Prerequisites​

Resource acquisition​

Steps​

1. Create CarApi.js file​

2. Add mobile vehicles​

3. Call the moving vehicle method​

4. Check the effect​