腾讯地图轨迹回放的实现

效果图

首先了解一下需要使用到的API

API	定义
MultiMarker（必选）	用于实现在地图中的点标注功能，可以根据用户设置的样式同时标注多个位置
InfoWindow（可选）	信息窗口，一般用于地点的摘要性信息的展示，Javascript API GL 提供了TMap.infoWindow类，用于实现这一功能
MultiPolyline（可选）	矢量图形指绘制在地图上的二维线、面覆盖物，具有广泛的应用场景，用于构建折线，常用于表现规划线路、行动轨迹、区域边界等

实现思路
1、将轨迹数据进行处理，遍历经纬度，全部转为腾讯地图new TMap.LatLng(lat,lng)，放进一个数组变量，用于后面渲染回放轨迹和渲染轨迹线；
2、创建一个数组变量，用来存放信息窗口需要展示的内容

for (let i = 0; i < arr.length; i++) {if (i !== arr.length - 1) {if (arr[i + 1].lon !== arr[i].lon && arr[i + 1].lat !== arr[i].lat) { // 去重和一些没有经纬度的数据this.polylineData.push(new TMap.LatLng(arr[i].lat, arr[i].lon));this.trackData.push({position: new TMap.LatLng(arr[i].lat, arr[i].lon),updateTime: arr[i].updateTime,speed: arr[i].speed,imei: arr[i].imei,coordType: arr[i].coordType,});}} else {this.polylineData.push(new TMap.LatLng(arr[i].lat, arr[i].lon));this.trackData.push({position: new TMap.LatLng(arr[i].lat, arr[i].lon),updateTime: arr[i].updateTime,speed: arr[i].speed,imei: arr[i].imei,coordType: arr[i].coordType,});}}

3、设置轨迹的相关图标样式，包括起点、终点和行走的图标

this.playBackMarkers.setStyles({'car-down': new TMap.MarkerStyle({width: 30,height: 30,anchor: {x: 10,y: 20,},faceTo: 'screen',rotate: 0,src: require('../../assets/images/car.png'),}),polyMark: new TMap.MarkerStyle({width: 40,height: 40,anchor: { x: 15, y: 32 },src: require('../../assets/images/coordinate-spot.png'),}),start: new TMap.MarkerStyle({width: 25,height: 35,anchor: { x: 15, y: 32 },src: require('../../assets/images/start.png'),}),end: new TMap.MarkerStyle({width: 25,height: 35,anchor: { x: 15, y: 32 },src: require('../../assets/images/end.png'),}),});

4、通过MultiMarker.setGeometries设置固定的起点、终点和行走开始点的图标

this.playBackMarkers.setGeometries([{id: 'car',styleId: 'car-down',rank: 4,position: this.polylineData[0],},{id: 'start',styleId: 'start',updateTime: this.trackData[0].updateTime,speed: this.trackData[0].speed,rank: 4,imei: this.trackData[0].imei,coordType: this.trackData[0].coordType,position: this.trackData[0].position,},{id: 'end',styleId: 'end',rank: 4,updateTime: this.trackData[this.trackData.length - 1].updateTime,speed: this.trackData[this.trackData.length - 1].speed,imei: this.trackData[this.trackData.length - 1].imei,coordType: this.trackData[this.trackData.length - 1].coordType,position: this.trackData[this.trackData.length - 1].position,},]);

5、通过MultiMarker.add将需要回放的点数据全部添加进坐标点，从而在地图上将所有的轨迹点显示出来

this.trackData.map((item, index) => {if (index != 0 && index != this.trackData.length - 1) {return this.playBackMarkers.add([{id: index,styleId: 'polyMark',position: item.position,updateTime: item.updateTime,speed: item.speed,imei: item.imei,rank: 2,coordType: item.coordType,},]);}});

6、创建MultiPolyline轨迹线，设置PolylineStyle的相关样式，将前面处理好的轨迹数据通过MultiPolyline.add添加进去

this.polylineLayer = new TMap.MultiPolyline({map: this.map, // 绘制到目标地图// 折线样式定义styles: {style_blue: new TMap.PolylineStyle({color: '#3777FF', // 线填充色width: 6, // 折线宽度borderWidth: 2, // 边线宽度borderColor: '#FFF', // 边线颜色lineCap: 'round', // 线端头方式// eraseColor: 'rgba(190,188,188,1)',eraseColor: 'rgba(74, 179, 34, .7)',showArrow: true,arrowOptions: {width: 6,height: 4,},}),},geometries: [],});this.polylineLayer.setGeometries([{id: 'erasePath',styleId: 'style_blue',paths: this.polylineData,},]);

7、创建InfoWindow信息窗体
8、做一个开始回放、暂停回放、重新回放、结束回放的事件处理

switchType(type) {if (type == 'start') {this.playBackMarkers.moveAlong({car: {path: this.polylineData, speed: 70,},},{autoRotation: true,});} else if (type == 'stop') {this.playBackMarkers.pauseMove();} else if (type == 'continue') {this.playBackMarkers.resumeMove();} else if (type == 'reStart') {this.playBackMarkers.moveAlong({car: {path: this.polylineData,speed: 70,},},{autoRotation: true,});} else if (type == 'closePlackBack') {if (this.trackData.length > 3) {this.infoWindow.destroy();this.polylineData = [];this.trackData = [];this.playBackMarkers.stopMove();this.playBackMarkers.setGeometries([]);this.playBackMarkers.setMap(null);this.polylineLayer.setMap(null);}}}

8、对轨迹回放的进行监听，执行腾讯地图的路线擦除，保证轨迹的填充线能够跟着行走图标的实际情况走

 // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVectorthis.polylineLayer.eraseTo('erasePath',passedLatLngs.length - 1,passedLatLngs[passedLatLngs.length - 1]);

9、监听marker点的点击，将点击后获取到的marker点赋值到信息窗体

总结
1、轨迹回放结束时务必要清除MultiMarker、MultiPolyline，关闭infoWindow信息窗体
2、infoWindow上的点击事件需要通过监听元素来添加，并且通过bind来改变this指向，否则不生效
3、轨迹数据一定要做去重处理，否则轨迹的填充线在回放的时候会有问题

腾讯地图GL（轨迹回放）相关推荐

高德地图3D轨迹回放 + 视野跟随功能
高德地图3D轨迹回放 + 视野跟随功能概述代码实现步骤完整代码 (需要添加一个2.0的key) 概述若有帮助到你,麻烦点一波关注,博主会持续推出Echarts,D3,地图,Three.js方面 ...
android 基于高德地图的轨迹回放
android 基于高德地图的轨迹回放前段时间公司项目有一个需求,就是需要看到设备上传之后的轨迹路线,并且可以实现回放的整个过程,功能包括路线回放.地图位置插点.回放之后的轨迹标记颜色.回放加速等功 ...
js室内地图开发_如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回放 ...
百度地图的轨迹回放和实时监控
最近写了两个页面,是跟百度地图有关的,本来以为是用的鹰眼的轨迹,才发现没那么麻烦,直接用的是百度地图自带的api. 1 轨迹回放 <template><div class=" ...
地图跑步轨迹回放动画实现
一.要求1.轨迹动画流畅,慢-快-慢:2.渐变色尽量与地图渐变API的效果一致:3.拖动地图,动画消失,显示完整渐变轨迹. 二.分析1.高德地图并没有提供相应效果的API,但是可以通过经纬度坐标,转换 ...
百度地图实现轨迹回放（显示到达时间）
使用了百度路书直接上代码,添加秘钥直接运行 <!DOCTYPE html> <html> <head><meta http-equiv="Cont ...
H5移动端高德地图巡查轨迹回放 2.0版
注意是HTTPS还是HTTP index.html引入 <script type="text/javascript" src="http://webapi.amap ...
bing地图车辆轨迹回放代码
1导入js <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jque ...
高德地图轨迹回放功能
一.介绍在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...

腾讯地图GL（轨迹回放）

腾讯地图轨迹回放的实现

腾讯地图GL（轨迹回放）相关推荐

最新文章

热门文章