百度路书实现车辆轨迹动态回放功能-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漏洞分析(