阅读 1964

Vue + 高德轨迹播放(一)

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

想法由来

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

地图

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

常见问题

高德地图提供了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,参数为高德地图的实例,可以自由地将原生SDKvue-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
  • 演示地址

轨迹.gif

方案一 轨迹回放(巡航器 PathSimplifier实现)

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

续航其.gif

数据准备

大轨迹数据 使用方法如下

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地图

跑起来了.gif

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);
});
复制代码

跑起来了1.gif

总结

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

文章分类
前端
文章标签