vue-cil+百度路书轨迹播放，removeOverlay单独删除覆盖物

废话不多说，先放图；

写在前面的话：笔者只提供简单的思路和可行性方案。所以代码比较粗糙，至于封装\优化等，请读者自行解决，拒绝伸手党谢谢。

功能：时间筛选播放，快进，快退，播放，停止，进度条跟随播放，进度条可拖动。轨迹蓝线，车辆经过绿线，车辆根据轨迹方向旋转；
需求：进入播放页面，默认开始播放，播放过程中，拖动进度条，若拖到轨迹终点时，播放暂停，其他按钮点击不暂停，播放速度：慢速、中速、快速，默认慢速

废话不多说放代码；
先到百度api http://api.map.baidu.com/library/LuShu/1.2/src/LuShu.js 将lushu.js下到项目中；
修改lushu .js代码；

//添加代码
this.event = document.createEvent('HTMLEvents');
this.event.initEvent("moveNext", true, true);

 /*** 发布事件**/_dispatchEvent(index){//var event = document.createEvent('HTMLEvents');//event.initEvent("moveNext", true, true);this.event.index = index;document.dispatchEvent(this.event);//console.log("dispatchEvent")},

好 lushu.js 基本改好了。

在vue-cli中导入百度地图和路书；

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>
<script type="text/javascript" src="/LuShu.js"></script>

我们新建一个baiduMap.js; 专门来处理百度地图api；

let map = ''
let markers = [];
let zoom = 0;
let isTwo = false;
let selfIcon = '/static/home/myPosition.png'let lushu = '';
let lushuPoints = []//路书轨迹点集合；
let lushuOys={}//路书覆盖物；export default {init(div, zoo = 17){zoom = zoo;map = new BMap.Map(div); // 创建Map实例var point = new BMap.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point, zoom);map.enableScrollWheelZoom();//开启鼠标滚轮缩放map.centerAndZoom(point, zoom);// 初始化地图,设置中心点坐标和地图级别var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件map.addControl(top_left_navigation);map.addControl(new BMap.MapTypeControl());},/*** 在地图上添加覆盖物* @param point：point* @param w* @param h* @param url*/diyMapIcon(point, w, h, url, ba = ''){let icon0 = this.setIcon({w, h, url})let marker2 = new BMap.Marker(point, icon0);  // 创建标注marker2.ba = bamap.addOverlay(marker2);  // 将标注添加到地图中;return marker2},//经纬度解析地址；getAddress(lng, lat){var myGeo = new BMap.Geocoder();let pp = new Promise(function (resolve, reject) {// 根据坐标得到地址描述myGeo.getLocation(new BMap.Point(lng, lat), function (result) {if (result) {resolve(result.address);} else {reject()}});});return pp},....})

接下来制作页面样式；用的ui框架是vant https://youzan.github.io/vant/#/zh-CN/intro
项目怎么样建立这里就不详细说了。
新建一个路由页面；gpsreplay.vue;

gpsreplay.vue; 有查询页和播放页两个功能；
gpsreplay.vue; 中要通过时间筛选请求，向服务器请求车辆的gps定位经纬度集合；
这个请求的目的是拿到车辆的方向集合和经纬度集合；

 //请求历史轨迹getTrackLogs(){let data = {terId: this.$route.query.TerId,locateTime1: this.locateTime1,locateTime2: this.locateTime2,}//时间和车牌号筛选；this.myAjax('/api/TrackLog/GetTrackLog', data).then((res)=> {if (res.length == 0) {this.toast('没有轨迹！');return;}this.setPage(1)//跳转轨迹播放页this.trackLogs = res;this.drawPolyline(res.length - 1, 1);//画线；})},

引入 baiduMap.js;

import myMap from '../baiduMap.js'

在baiduMap.js 中；

 /*** 设置路书 ；* @param pointArr ：经纬度集合* @param DirectionArr ：方向集合*/doLushu(pointArr, DirectionArr){let points = []for (let i = 0; i < pointArr.length; i++) {let pp = new BMap.Point(pointArr[i].lng, pointArr[i].lat);points.push(pp)}lushuPoints = points;//全局；lushu=this.initLushu(lushuPoints, DirectionArr)//初始化路书；this.addLushuOverlay(lushuPoints); //画轨迹线（蓝线）（绿线）、'起'和'终' iconmap.setViewport(points, {margins: [30, 30, 30, 30]}); //在屏幕居中显示。lushu.start();//开始动画},initLushu(points, DirectionArr){let myIcon = this.setIcon({w: 19, h: 32, url: "static/car/icon_car_move.png"});let lushuObj = {landmarkPois: [],//landmarkPois:此参数是路书移动的时候碰到这个点会触发pauseTime停留中设置的时间，单位为秒，经纬度误差超过十米不会停止//landmarkPois:[//  {lng:markers[0].lng,lat:markers[0].lat,html:'<img src="xian.jpg" /></br>西安北站到了',pauseTime:1},//  {lng:markers[1].lng,lat:markers[1].lat,html:'咸阳站到了',pauseTime:1},//  {lng:markers[2].lng,lat:markers[2].lat,html:'咸阳秦都站到了',pauseTime:1},//  {lng:markers[3].lng,lat:markers[3].lat,html:'兴平站到了',pauseTime:1}//],//defaultContent: '动车继续前行，况且况且...',icon: myIcon.icon,speed: 2000,//速度，单位米每秒autoView: true,enableRotation: true,DirectionArr: DirectionArr};return new BMapLib.LuShu(map, points, lushuObj);//初始化路书；},//画轨迹线（蓝线）（绿线）、'起'和'终' iconaddLushuOverlay(points){let startPt = points[0]let endPt = points[points.length - 1]let oneStart=this.diyMapIcon(startPt, 25, 30, "/static/car/icon_start.png", 'oneStart')let oneEnd=this.diyMapIcon(endPt, 25, 30, "/static/car/icon_end.png", 'oneEnd');let blueLine = new BMap.Polyline(points, {strokeColor: "#2962FF", strokeWeight: 6, strokeOpacity: 0.8});blueLine.ba = "blueLine";map.addOverlay(blueLine);//添加轨迹到地图let greenLine = new BMap.Polyline([], {strokeColor: "#00F53D", strokeWeight: 6, strokeOpacity: .8});greenLine.ba = 'greenLine';map.addOverlay(greenLine);lushuOys={blueLine,greenLine,oneStart,oneEnd}//自定义的路书覆盖物集合对象；},/*** 根据索引设置绿线path；* @param index 轨迹点索引；* 本来打算不删除。但是如果不删除绿线直接设置setPath，当点击‘快退’的时候，绿线并未刷新。所以要删除后添加；* 在百度地图中removeOverlay，简直难用到要吐血。清空某个折线，折线类型会全部会跟着删除（蓝线也被删除了。太无语了），所以只能把后再添加蓝线...* 这个方法能完美的和进度条结合。无论怎么拖动进度条，绿线都能在相应的轨迹点上；*/playGreenLine(index){let oy=lushuOys.greenLine;let oy0=lushuOys.blueLine;let arr2 = [];for (let i in lushuPoints) {if (i < index) {arr2.push(lushuPoints[i])}}oy.setPath(arr2);map.removeOverlay(oy0);map.addOverlay(oy0);map.removeOverlay(oy);map.addOverlay(oy);},//设置速度setLushuSpeed(speed){lushu._opts.speed = speed},//设置索引setLushuIndex(index){if (index < 1) {index = 0;}if (index >= lushu._path.length - 1) {index = lushu._path.length - 1}if (lushu.i >= lushu._path.length - 1 || lushu._fromPause) {lushu.start();}lushu.i = index;},//0开始，1暂停，2快进，3快退，4停止，5删除清空路书setlushuType(type){console.log('lushu', lushu.i, map.getOverlays());let index = 0;switch (type) {case 0:lushu.start();break;case 1:lushu.pause();break;case 2:if (lushu.i < lushu._path.length - 6) {index = lushu.i + 5;}this.setLushuIndex(index)break;case 3://快退if (lushu.i < lushu._path.length - 6) {index = lushu.i - 5;}this.setLushuIndex(index)break;case 4:lushu.stop();break;case 5://  删除清空路书lushu.stop();lushu = ''break;}}

无论是车辆移动，绿线跟着画线，还是进度条播放，拖动，快进，快退。本质上都是改变路书的 index索引；

vue-cil+百度路书轨迹播放，removeOverlay单独删除覆盖物相关推荐

vue.js BMap 与BMapLib.lushu 的配置与百度路书，结合项目后台的实例展示
@[vue.js BMap 与BMapLib.lushu 的配置与百度路书,结合项目的实例展示] 上一章实现了百度轨迹的展现.今天写一个百度路书结合项目功能的实现. (实例很全面,认真相互探讨学习) ...
百度路书实现轨迹回放（标准）
心酸制作历程当刚接下这项目时,便开始研究如何实现轨迹回放的功能:而刚开始当然是直接查找百度的实例百度路书实例,如下图但是我们的需求是需要通过进度,速度来进行调整(如下图),显然难以达到这个目标. ...
百度路书实现车辆轨迹动态回放功能-javascrpt版
基于百度路书js实现车辆轨迹回放功能:接到一个新需求,实现车辆历史轨迹回放功能,之前没有做过,根据网上各种文章走了一些坑,基本上都是半成品,最后还是看百度地图原生api完成开发,现在把最终结果分享给大 ...
基于百度地图和百度路书的行车轨迹回放(含途经点的多次导航)
目录先来看看我做了个啥我为什么要这件事我用到的工具正式开始创建一张空地图设置我的起点.终点.途经点为上面几个关键点打上标签绘制折线绘制折线的方法第一个难点加一辆小车在路上跑添加 ...
【百度地图】路书轨迹显示
[百度地图]路书轨迹显示通过后端返回的坐标点列表,然后在地图上展示出轨迹,并且显示标点和显示窗口文案.效果如下引入百度地图,因为百度地图的轨迹(路书)模式只能是3.0才可以使用,所以注意自己引入的 ...
百度路书实现车辆实时轨迹和边走边划线
百度地图提供了一个路书功能,非常适合画行驶轨迹,但是不能实现实时的轨迹,只能够做历史轨迹回放使用.为了方便在起点和终点确定的情况下,根据当前移动画出车辆实时轨迹,只有对Lushu.js进行修改,以适合 ...
百度路书信息显示_学会用地图制作路书，分分钟从小白变成自驾游达人
原创文章,欢迎点评! 很多想要开车自驾游的朋友,由于自己不会做行程规划和安排,或总是感觉自己做的行程规划.安排不是很精准,不能很清晰的规划出自己每天该走多远的路?途中在景点游玩的时间应该是多少?什么时 ...
百度路书设置autoView为true 无法准确自动视野调整
在官方文档 LuShu.js 中有些代码中 autoView: true, //是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整其实是随着有拐角处才会刷新好多文献太老了还是,, ...
vue引入百度地图实现轨迹绘制
引入 cnpm i --save vue-baidu-map main.js import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: 'U ...

vue-cil+百度路书轨迹播放，removeOverlay单独删除覆盖物

vue-cil+百度路书轨迹播放，removeOverlay单独删除覆盖物相关推荐

最新文章

热门文章