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 = ba
map.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); //画轨迹线（蓝线）（绿线）、'起'和'终' icon
map.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);//初始化路书；
},
//画轨迹线（蓝线）（绿线）、'起'和'终' icon
addLushuOverlay(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索引；
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献11条内容
所有评论(0)