废话不多说,先放图;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

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

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

废话不多说放代码;
先到百度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索引;

Logo

前往低代码交流专区

更多推荐