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

最新推荐文章于 2022-09-29 14:06:45 发布

久如云漂泊

最新推荐文章于 2022-09-29 14:06:45 发布

阅读量4.5k

点赞数 6

分类专栏： jquery vue 百度地图

本文链接：https://blog.csdn.net/u012123026/article/details/85342832

版权

vue 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

百度地图

1 篇文章 0 订阅

订阅专栏

废话不多说，先放图；

在这里插入图片描述

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

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

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