基于GraphHopper搭建离线路径规划服务并可视化
效果圖：
說明：
? ? ? ?上篇已經說到如何在本機開啟GraphHopper服務了，地址在這：https://blog.csdn.net/wml00000/article/details/84030182?，里面的第一步就是，總結一下就是：一個jar包，一份pbf格式的數據，一個配置文件，然后在cmd窗口下跑一條命令。兩個需要注意的地方：1.如果你想做全國的路徑規(guī)劃，先到OpenStreetMap上下載全國路網數據， 由于數據過大，跑的時候可能出現內存問題，可以試試加上-Xmx2g -Xms2g，我的命令：java -Xmx2g -Xms2g -Dgraphhopper.datareader.file=china-latest.osm.pbf -jar graphhopper-web-0.11.0.jar server config-example.yml??2.如果想讓您本機的服務其他機器都能訪問，注意修改配置文件最后的：bindHost: localhost?把localhost改成你的機器IP地址
服務啟動之后，cmd窗口有提示打開localhost:8989
? ? ? ?到現在為止，后臺工作已經完成，下面就是前臺請求以及可視化工作。url請求地址仿照著拼就行了，前邊是協(xié)議+IP+端口，后面參數根據選的點自己拼，不需要key,要注意參數points_encoded，他默認是true，也就是說返回來的點數據都是加密的，看你需求了，不想加密的話設為false。我的一個完整URl：
Request URL:
http://localhost:8989/route?point=52.53032100669386,13.344612121582031&point=52.527710210603935,13.409500122070314&type=json&locale=zh-CN&vehicle=car&weighting=fastest&points_encoded=false
主要代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>離線路徑規(guī)劃</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./lib/leaflet/leaflet.css" /><link rel="stylesheet" href="lib/leaflet/leaflet.contextmenu.css"/><script src="./lib/leaflet/leaflet.js"></script><script src="./lib/leaflet/leaflet-ant-path.js" type="text/javascript"></script><script src="./lib/leaflet/leaflet.contextmenu.js"></script> </head><style>* { margin: 0; padding: 0; }html, body { height: 100%; }#mapid { width:100%; height:100%; } </style><body> <div id="mapid" ></div> <script>var map = L.map('mapid', {center: [52.52207,13.374481],zoom: 13,crs: L.CRS.EPSG3857,layers: [L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'})],contextmenu: true,contextmenuItems: [{text: '設置為起點',callback: setStartPoint}, {text: '設置為中間點',callback: setWaypoints}, '-', {text: '設置為終點',callback: setStopPoint}, {text: '開始規(guī)劃',callback: calcRoute}]});var _startPoint,_stopPoint,_wayPoints = [];var _points = [];//用于存儲所有點function setStartPoint(event){_startPoint = event.latlng;var _icon = L.icon({iconUrl:'./lib/img/start.png'})L.marker(_startPoint,{icon:_icon}).addTo(map);}function setWaypoints(event){_wayPoints.push(event.latlng);var _icon = L.icon({iconUrl:'./lib/img/way.png'})L.marker(event.latlng,{icon:_icon}).addTo(map);}function setStopPoint(event){_stopPoint = event.latlng;var _icon = L.icon({iconUrl:'./lib/img/stop.png'})L.marker(_stopPoint,{icon:_icon}).addTo(map);}function calcRoute() {var url = _buildRouteUrl();if(url == null || url == undefined){return;}else{var request,me = this;if (window.XMLHttpRequest) {request = new XMLHttpRequest();} else {request = new ActiveXObject('Microsoft.XMLHTTP');}request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時，函數被回調if (request.readyState === 4) { // 成功完成// 判斷響應結果:if (request.status === 200) {// 成功，通過responseText拿到響應的文本:return _success(request.responseText);} else {// 失敗，根據響應碼判斷失敗原因:return _fail(request.status);}} else {// HTTP請求還在繼續(xù)...}}// 發(fā)送請求:request.open('GET', url);request.send();//alert('請求已發(fā)送，請等待響應...');}}function _buildRouteUrl(){var wayPoints = _setPointsSequence();if(wayPoints == null || wayPoints == undefined){return;}else{var locs = [],i,baseUrl;for (i = 0; i < wayPoints.length; i++) {locs.push('point=' + wayPoints[i].lat + ',' + wayPoints[i].lng);}baseUrl = 'http://localhost:8989' + '/route?' + locs.join('&');return baseUrl + '&type=json&locale=zh-CN&vehicle=car&weighting=fastest&points_encoded=false';}}function _setPointsSequence(){var me = this;if(this._startPoint == null || this._startPoint == undefined){alert("請先設置起點");return;}if(this._stopPoint == null || this._stopPoint == undefined){alert("請先設置終點");return;}this._points.push(this._startPoint);if(this._wayPoints.length > 0){for(let i=0;i<me._wayPoints.length;i++){me._points.push(me._wayPoints[i]);}}this._points.push(this._stopPoint);return this._points;}function _success(text){this._responseResult = text;var json = JSON.parse(text);var lnglats = json.paths[0].points.coordinates;//(lng,lat)var latlngs = [];//(lat,lng)for(let j=0;j<lnglats.length;j++){var lnglat = lnglats[j];var latlng = [];latlng[0] = lnglat[1];latlng[1] = lnglat[0];latlngs.push(latlng);}var path = L.polyline.antPath(latlngs,{color: "#A52A2A", pulseColor: "#0000FF"});path.addTo(map);return text;}function _fail(code){alert('請求失敗，' + 'Error code: ' + code);return code;}</script> </body> </html>進行可視化的時候用到了兩個插件：一個是右鍵菜單，一個線動畫
源文件下載地址：https://download.csdn.net/download/wml00000/10787367
總結
以上是生活随笔為你收集整理的基于GraphHopper搭建离线路径规划服务并可视化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于Leaflet和GraphHoppe
- 下一篇： 百度地图示例左侧的代码编辑器Ace Ed