Vue + 高德轨迹播放（一）

目录

想法由来

地图

创建项目

必要依赖项

引入高德地图key

页面中使用

启动过程中的错误和解决

参考高德官方示例

数据准备

方案一 接入效果

总结

---

想法由来

前不久项目上要用到地图的轨迹播放功能，自己在实现的过程中也走了一些弯路，遇到了一些问题，整理复盘下供大家参考指正。

 

地图

 目前我使用最多的是腾讯地图和高德地图，个人觉得高德比较稳定些，最终还是用高德地图实现的。

常见问题

高德地图提供了FAQ快速问题定位页面，将开发者常见的问题进行专门的维护解决，这个特别能提高效率，尤其向领导汇报使用高德地图的评估，可能遇到的问题和配额，以及在不同平台的兼容等问题，都记录的很详细。

创建项目

Gitee码云里面已经创建了一个Vue项目，里面集成了高德轨迹功能

PS E:\掘金案例> git clone https://gitee.com/zhaotao27/amap-pathsimplifier-gps-player.git
Cloning into 'amap-pathsimplifier-gps-player'...
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 5 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (5/5), done.
Checking connectivity... done.
PS E:\掘金案例> cd .\amap-pathsimplifier-gps-player\
PS E:\掘金案例\amap-pathsimplifier-gps-player> yarn
yarn install v1.22.10
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 0.20s.

必要依赖项

vue-amap有 init 这个 event，参数为高德地图的实例，可以自由地将原生SDK 和 vue-amap 结合起来使用，毕竟巨人的肩膀还是很高大的。

 

"vue-amap": "^0.5.10"

引入高德地图key

项目创建引入地图Key

import VueAMap from 'vue-amap';

// 置地图key
VueAMap.initAMapApiLoader({
  key: process.env.VUE_APP_MAP_KEY,
  plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'Geolocation', 'Geocoder', 'MarkerClusterer', 'ElasticMarker', 'Heatmap'],
  uiVersion: '1.0', // ui库版本，不配置不加载,
  v: '1.4.4'
});

页面中使用

在AmapGpsPlayer组件中引入高德地图实例

// lazyAMapApiLoaderInstance 确保高德地图基础环境已经加载完毕
import { lazyAMapApiLoaderInstance } from 'vue-amap'
// load 回调确保顺序执行
lazyAMapApiLoaderInstance.load().then(() => {
    this.initMapTrackGpsIns()
})

启动过程中的错误和解决

启动报错

Failed to compile./src/components/AmapGpsPlayer.vue 
Module Error (from ./node_modules/eslint-loader/index.js):
E:\掘金案例\amap-pathsimplifier-gps-player\src\components\AmapGpsPlayer.vue
32:29 error 'AMap' is not defined no-undef 
39:7 error 'AMapUI' is not defined no-undef 
✖ 2 problems (2 errors, 0 warnings)

解决方法

在package.json文件中

"eslintConfig": {
    "globals": {
      "AMap": true,
      "AMapUI": true
    }
  },

参考高德官方示例

方案一 轨迹回放（覆盖物 Marker自带动画实现）

• 代码简单，功能较少
• 需求要求不严格
• 可快速成型Demo
• 演示地址

 

方案一 轨迹回放（巡航器 PathSimplifier实现）

• 代码复杂，功能完善
• 可调整速度，实现快进 快退
• 灵活和拓展性高
• 演示地址

数据准备

大轨迹数据 使用方法如下

let BIGROUTES = [];
fetch('https://a.amap.com/amap-ui/static/data/big-routes.json')
  .then(res => res.json())
  .then(res =>  {
    BIGROUTES = res
    console.log('我是大轨迹数据********', res)
})

地图接口释义

地图接口定义，大家需要自取Gitee码云

/** MapOptions **/
  export interface MapOptions {
    /**地图视口, 用于控制影响地图静态显示的属性, 如: 地图中心点“center”推荐直接使用zoom、center属性为地图指定级别和中心点(自v1.3 新增)**/
    view?: View2D;

    /**地图图层数组, 数组可以是图层 中的一个或多个, 默认为普通二维地图。当叠加多个图层时, 普通二维地图需通过实例化一个TileLayer类实现(自v1.3 新增)**/
    layers?: Array<any>;

    /**地图显示的缩放级别, 若center与level未赋值, 地图初始化默认显示用户所在城市范围 3D地图下, zoom值, 可以设置为浮点数。(在V1.3.0版本level参数调整为zoom, 3D地图修改自V1.4.0开始生效)**/
    zoom?: number;

    /**地图中心点坐标值**/
    center?: LngLat | number[];

    /**3D模式下的地图旋转角度 */
    rotation?: number;

    /**地图标注显示顺序, 大于110即可将底图上的默认标注显示在覆盖物(圆、折线、面)之上。**/
    labelzIndex?: number;

    /**地图显示的缩放级别范围在PC上, 默认为[3, 18], 取值范围[3-18]；在移动设备上, 默认为[3, 19], 取值范围[3-19]**/
    zooms?: Array<any>;

    /**地图语言类型可选值: zh_cn: 中文简体, en: 英文, zh_en: 中英文对照默认为: zh_cn: 中文简体注: 由于图面内容限制, 中文、英文 、中英文地图POI可能存在不一致的情况(自v1.3 新增)**/
    lang?: string;

    /**地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范**/
    defaultCursor?: string;

    /**地图显示的参考坐标系, 取值: 'EPSG3857''EPSG3395''EPSG4326'自V1.3.0移入view对象中**/
    crs?: string;
    ......
}

方案一 接入效果

默认2D地图

3D地图视图

感谢大佬们的指正，添加3D后效果果然好了很多， 不过自己的配图能力太弱了。。

#  添加3D效果
let object3Dlayer = new AMap.Object3DLayer();
this.roadMapIns.add(object3Dlayer)

AMapUI.loadUI(['control/BasicControl'], (BasicControl) => {
  let traffic = new BasicControl.Traffic({
    showButton: true,
    theme: 'normal'
  });
  this.roadMapIns.addControl(traffic);
});

总结

方案一接入还是比较简单的，但是不知不觉中写了很多字，方案二会在后续更新出来，里面有不对的地方请大家留言指正，实际项目中，需求复杂度更高，实现难度也比较大，这只是自己的小复盘，有共同兴趣的小伙伴可以交流下，一起进步！