百度路书实现车辆轨迹动态回放功能-javascrpt版
生活随笔
收集整理的这篇文章主要介绍了
百度路书实现车辆轨迹动态回放功能-javascrpt版
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
基于百度路书js实现车辆轨迹回放功能：接到一个新需求，实现车辆历史轨迹回放功能，之前没有做过，根据网上各种文章走了一些坑，基本上都是半成品，最后还是看百度地图原生api完成开发，现在把最终结果分享给大家。
文章目录
- 前言
- 一、车辆轨迹回放实现前提是什么？
- 二、为什么用百度路书功能？
- 二、直接上代码
- 1.效果图
- 2.代码
- 总结
前言
项目技术选型：我们这里是springboot项目，前端框架是bootstrap，页面采用html，所以采用javascript地图解决方案，之前有百度地图做过可视化，所以选择百度地图+javascript+路书实现。
一、车辆轨迹回放实现前提是什么？
前提：必须有可连续描点成轨迹线路的经纬度数据，我们已有gps硬件三方api可以获取指定时间段内的车辆gps定位经纬度数据，json格式，这个是前提。还有注意经纬度格式和地图匹配，我这里使用百度地图，经纬度格式符合百度地图描点要求。开发前先要在百度地图申请开发者AK，具体方法百度一下即可。
二、为什么用百度路书功能？
说明：首先注意js引入的百度地图版本，不同的版本关于map操作语法不一样，早期没有路书，车辆轨迹回放是通过图层遮盖实现的，比较麻烦，后期版本加入了路书功能，实现更加简单，这里使用新版本BMapGL。
注意：BMapGL和BMap不一样，跟引入的百度地图版本有关。
二、直接上代码
1.效果图
两种效果，一种普通地图，一种卫星地图，区别只有几行代码，普通地图注释掉就可以了。
点击左下角按钮，可以控制汽车动画开始、停止、暂停等操作。
2.代码
代码如下（示例）：
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" /><title>路书</title><style type="text/css">body,html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}ul li {list-style: none;}#map_canvas {width: 100%;height: 100%;}#result {width: 100%}#btns {z-index: 999;position: fixed;bottom: 3.5rem;margin-left: 2.5rem;padding-left: 0;border-radius: .25rem;display: flex;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);text-align:center;}#btns li{border-right: 1px solid #d2d2d2;padding:10px 10px;height: 100%;background-color: #fff;cursor: pointer;color:#3a79b5;}</style><script>window.BMAP_AUTHENTIC_KEY = '7Cc5Kmn672miPzG4qQhvlOrERcXMMinq';</script><!-- JavaScript Plugins --><script type='text/javascript' src='/js/utils/jquery-1.7.2.min.js' ></script><script type='text/javascript' src='/js/utils/jquery.mousewheel.min.js' ></script><script type='text/javascript' src='/js/utils/jquery.placeholder.js' ></script><script type='text/javascript' src='/js/utils/jquery.fileinput.js' ></script><script type='text/javascript' src='/js/utils/jquery.form.js' ></script><script type="text/javascript"src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script><script type="text/javascript" src="http://bj.bcebos.com/v1/mapopen/github/BMapGLLib/Lushu/src/Lushu.min.js"></script><style>html,body,#container {width: 100%;height: 100%;overflow: hidden;margin: 0;padding: 0}.info {z-index: 999;width: auto;padding: 10px;margin-left: 10px;position: fixed;top: 10px;background-color: #fff;border-radius: 5px;font-size: 14px;color: #666;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);}ul li {list-style: none;}.btn-wrap {z-index: 999;position: fixed;bottom: 30px;left: 10px;padding: 10px;border-radius: 5px;background-color: #fff;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);}.btn {width: 100px;height: 30px;float: left;background-color:rgba(265, 265, 265, 0.9);color: rgba(27, 142, 236, 1);font-size: 14px;border:1px solid rgba(27, 142, 236, 1);border-radius: 5px;margin: 0 5px;text-align: center;line-height: 30px;}.btn:hover {background-color: rgba(27, 142, 236, 0.8);color: #fff;cursor: pointer;}</style> </head><body><div id="map_canvas"></div><div id="result"></div><ul id='btns'><li id="run">开始</li><li id="stop">停止</li><li id="pause">暂停</li><li id="hide">隐藏信息窗口</li><li id="show">展示信息窗口</li><li id="showRoadNet">显示路网</li>//不需要卫星地图的注释掉<li id="hideRoadNet">隐藏路网</li>//不需要卫星地图的注释掉</ul><script type="text/javascript">//获取历史轨迹数据，后台获取经纬度api接口window.onload = function(){//查询基础数据$.ajax({type:'get',async:false,dataType:"json",url : "后台获取经纬度api接口",success : function(data) {setTrackmap(data.aaData,data.carNum)}});}function setTrackmap(arrPois,carNum) {if(arrPois!=null && arrPois!=false){var map = new BMapGL.Map('map_canvas');//控件map.addControl(new BMapGL.ZoomControl());// 添加缩放控件map.enableScrollWheelZoom();map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式,不需要卫星地图的注释掉// map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 13);map.setTilt(73);//不需要卫星地图的注释掉//开始位置 结束位置 开始时间，结束时间var startPoint,endPoint;var arrPoisT = [];//点位信息//经纬度点位整理for (let i = 0 && arrPois.length>0; i < arrPois.length; i++) {var point = new BMapGL.Point(arrPois[i].toString().split(',')[0],arrPois[i].toString().split(',')[1]); //业务逻辑if(i===0){//开始位置startPoint = point}//结束位置endPoint=pointarrPoisT.push(point);}map.centerAndZoom(arrPoisT[0], 12);var lushu;var marker;var markerStart = new BMapGL.Marker(startPoint); // 创建标注var markerEnd = new BMapGL.Marker(endPoint); // 创建标注//添加开始结束点 //map.addOverlay(markerStart);map.addOverlay(markerEnd);markerEnd.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画//以下是地图上的标注信息//markerStart.setLabel(setLabelStyle("起点"));//markerEnd.setLabel(setLabelStyle("终点"));marker=new BMapGL.Marker(startPoint,{//引入小车图标icon : new BMapGL.Icon('/commonPic/car.png', new BMapGL.Size(52,26),{anchor : new BMapGL.Size(27, 13)})});//展示时小车样式var label = new BMapGL.Label(carNum,{offset:new BMapGL.Size(-33,-45)});label.setStyle({textAlign: 'center',border:"white .5px solid",color: "white",borderRadius:"2px",boxShadow:'0 0 1px 2px #1e68bb',padding:"2px 9px",background:"#1e68bb",});marker.setLabel(label);map.addOverlay(marker);// 实例化一个驾车导航用来生成路线var drv = new BMapGL.DrivingRoute('地区', {onSearchComplete: function (res) {if (drv.getStatus() == BMAP_STATUS_SUCCESS) {var plan = res.getPlan(0);/* var arrPois = [];for (var j = 0; j < plan.getNumRoutes(); j++) {var route = plan.getRoute(j);arrPois = arrPois.concat(route.getPath());} */map.addOverlay(new BMapGL.Polyline(arrPoisT, {strokeColor : "red",strokeWeight : 5,//宽度strokeOpacity : 1//透明度}));map.setViewport(arrPoisT);lushu = new BMapGLLib.LuShu(map, arrPoisT, {defaultContent: carNum, // "信息窗口文案"autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整speed: 500,// icon: new BMapGL.Icon('./images/car.png', new BMapGL.Size(32, 32), { anchor: new BMapGL.Size(10, 10) }),icon: new BMapGL.Icon('/commonPic/car.png', new BMapGL.Size(52,26),{anchor : new BMapGL.Size(27, 13)}),enableRotation: true, // 是否设置marker随着道路的走向进行旋转});}}});//点击小车开始监听事件marker.addEventListener("click",function(){marker.enableMassClear(); //设置后可以隐藏改点的覆盖物marker.hide();lushu.start();//map.clearOverlays(); //清除所有覆盖物});drv.search(startPoint, endPoint);//绑定事件$("run").onclick = function () {marker.enableMassClear(); //设置后可以隐藏改点的覆盖物marker.hide();//开始lushu.start();}$("stop").onclick = function () {//停止lushu.stop();}$("pause").onclick = function () {//暂停lushu.pause();}$("hide").onclick = function () {//隐藏信息窗口lushu.hideInfoWindow();}$("show").onclick = function () {//展示信息窗口lushu.showInfoWindow();}$("showRoadNet").onclick = function () {map.setDisplayOptions({street: true, //是否显示路网（只对卫星图和地球模式有效）,不需要卫星地图的注释掉})}$("hideRoadNet").onclick = function () {map.setDisplayOptions({street: false, //是否显示路网（只对卫星图和地球模式有效）,不需要卫星地图的注释掉})}function $(element) {return document.getElementById(element);}}else{var map = new BMapGL.Map('map_canvas');map.enableScrollWheelZoom();map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式// map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 13);//控件map.addControl(new BMapGL.ZoomControl());// 添加缩放控件var startPoint = new BMapGL.Point(116.643367,41.217292);map.centerAndZoom(startPoint, 11);var lushu;var marker;var markerStart = new BMapGL.Marker(startPoint); // 创建标注//var markerEnd = new BMapGL.Marker(endPoint); // 创建标注//添加开始结束点 //map.addOverlay(markerStart);//map.addOverlay(markerEnd);//markerEnd.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画//以下是地图上的标注信息//markerStart.setLabel(setLabelStyle("起点"));//markerEnd.setLabel(setLabelStyle("终点"));marker=new BMapGL.Marker(startPoint,{//引入小车图标icon : new BMapGL.Icon('/commonPic/car.png', new BMapGL.Size(52,26),{anchor : new BMapGL.Size(27, 13)})});//展示时小车样式var label = new BMapGL.Label("车辆无信号",{offset:new BMapGL.Size(-33,-45)});label.setStyle({textAlign: 'center',border:"white .5px solid",color: "white",borderRadius:"2px",boxShadow:'0 0 1px 2px #1e68bb',padding:"2px 9px",background:"#1e68bb",});marker.setLabel(label);map.addOverlay(marker);//绑定事件$("run").onclick = function () {marker.enableMassClear(); //设置后可以隐藏改点的覆盖物marker.hide();//开始lushu.start();}$("stop").onclick = function () {//停止lushu.stop();}$("pause").onclick = function () {//暂停lushu.pause();}$("hide").onclick = function () {//隐藏信息窗口lushu.hideInfoWindow();}$("show").onclick = function () {//展示信息窗口lushu.showInfoWindow();}function $(element) {return document.getElementById(element);}}}</script> </body></html>总结
百度路书其实也是封装了原有图层遮盖描点的方法，只是更加简单方便，开箱即用，比较适合我这种后台开发。
总结
以上是生活随笔为你收集整理的百度路书实现车辆轨迹动态回放功能-javascrpt版的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： python 处理xml文件
- 下一篇： 网络靶场实战-RouterOS漏洞分析(