步骤三、添加移动车辆

先决条件

授权

您需要先拥有一个授权码，授权码获取请参考授权申请。

资源获取

注意

场景中涉及到的图片、模型、第三方库、源码等资源，点击下载获取。

步骤

1、创建CarApi.js文件

• 在 api 文件夹中新建 CarApi.js 文件。

2、添加移动车辆

• 在 CarApi.js 文件中，添加移动车辆代码。

• 主要的实现思路是：先预制移动路线，然后通过匹配不同车辆的模型，让其按照路线运动。

  // 该类主要用于车辆的动画
  class CarApi {
    constructor(map) {
        this._map = map;
    }
  
    initCar() {
        // 定义车辆行驶路径与动画持续时间数据
        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],
                ],
            },
            // …… 参考源码补充完整，也可添加自定义路径
        ];
  
        // 要添加的车辆模型名称数组
        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++) {
  
            // 设置模型资源
            let model = [
                {
                    type: 'glb',
                    url: './assets/models/cars/' + models[i] + '.mm', // 设置模型路径
                    // 因我们提供的模型是加密过的，所以需要设置该参数，如果加载的是自己的模型，就不用设置
                    decryptWasm:'https://delivery.mapmost.com/cdn/b3dm_codec/0.0.2-alpha/sdk_b3dm_codec_wasm_bg_opt.wasm', 
                },
            ];
  
            // 生成随机 id
            let uuid = this._getuuid();
            let option = {
                id: uuid,
                type: 'model', // 设置图层类型
                models: model, // 设置模型资源
                center: [120.73062035254365, 31.288398677612456, 0.9999941344157874], // 设置模型中心点
                callback: function (group, layer) { // 模型回调函数
                    
                    // 调整指定模型的旋转角度，保证所有车辆都在正确的方向上行驶
                    if (i == 7) {
                        group.setRotation({ x: 100, y: 100, z: 100 });
                    }
  
                    // 车辆移动动画
                    group.followPath(
                        { 
                            path: carPaths[i].coord,       // 车辆移动路径
                            duration: carPaths[i].duration // 车辆移动动画持续时长
                        }  
                    );
                },
            };
  
            // 将模型添加到地图中
            this._map.addLayer(option);
        }
    }
  
    // 随机生成 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);
        }
        );
    }
  }
  
  // 导出 CarApi 类，使其可以在其他模块中被使用
  export default CarApi;

• 在 Map.vue 文件中引入 CarApi 类

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

3、调用移动车辆方法

• 在添加园区模型的回调函数中调用。

  let options = {
    id: 'model_id',
    models: models_obj,
    outline: true, 
    type: 'model',
    center: [120.73014920373011, 31.287414975761724, 0.1],
    callback: function (group, layer) {  // 模型回调函数  
        modelLayer = layer;
        
        // 调用移动车辆方法
        let car = new CarApi(map);
        car.initCar();
  
        //每隔 10 秒放一次车，放 5 次
        let count = 0;
        setInterval(function () {
          if (count < 5) {
            car.initCar();
            count++;
          }
        }, 10000);
    },
  };
  笔记

  有关模型动画的更多信息，请访问添加模型中的Object3D方法，相关示例可参考模型动画。

4、查看效果

• 运行，查看效果，这时场景中可以看见移动车辆的效果。

  npm run dev