目录
想法由来
地图
创建项目
必要依赖项
引入高德地图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);
});
总结
方案一接入还是比较简单的,但是不知不觉中写了很多字,方案二会在后续更新出来,里面有不对的地方请大家留言指正,实际项目中,需求复杂度更高,实现难度也比较大,这只是自己的小复盘,有共同兴趣的小伙伴可以交流下,一起进步!