效果图：

说明：

上篇已经说到如何在本机开启GraphHopper服务了，地址在这：https://blog.csdn.net/wml00000/article/details/84030182 ，里面的第一步就是，总结一下就是：一个jar包，一份pbf格式的数据，一个配置文件，然后在cmd窗口下跑一条命令。两个需要注意的地方：1.如果你想做全国的路径规划，先到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请求地址仿照着拼就行了，前边是协议+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>离线路径规划</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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'})],contextmenu: true,contextmenuItems: [{text: '设置为起点',callback: setStartPoint}, {text: '设置为中间点',callback: setWaypoints}, '-', {text: '设置为终点',callback: setStopPoint}, {text: '开始规划',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 () { // 状态发生变化时，函数被回调if (request.readyState === 4) { // 成功完成// 判断响应结果:if (request.status === 200) {// 成功，通过responseText拿到响应的文本:return _success(request.responseText);} else {// 失败，根据响应码判断失败原因:return _fail(request.status);}} else {// HTTP请求还在继续...}}// 发送请求:request.open('GET', url);request.send();//alert('请求已发送，请等待响应...');}}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搭建离线路径规划服务并可视化相关推荐

离线地图+GraphHopper搭建离线路径规划
效果: 上代码: <template> <section><div id="leafletMap" class="home" :s ...
基于Leaflet和GraphHopper实现离线路径规划
需求分析: 首先关于地图功能都是基于开源框架Leaflet进行开发,现在要在断网的情况下实现路径规划.这里面其实包含了两个问题: 1.路网数据必须是离线的: 2.必须有离线的路径规划后台服务. 开发过 ...
路径规划服务基于java实现
java版路径规划文章目录 java版路径规划前言一.路径规划服务是什么? 二.GraphHopper是什么? 1.GraphHopper介绍 2.GraphHopper 结合java使用 1. ...
openstreetmap-server-ubuntu-16-04+GraphHopper搭建离线地图服务器和离线路径规划
openstreetmap-server-ubuntu-16-04+GraphHopper搭建离线地图服务器和离线路径规划一．升级系统二．安装PostgreSQL数据库和PostGIS扩展三．下 ...
Graphhopper OSM地图路径规划导航离线搭建教程
GraphHopper是一种快速且内存有效的Java导航引擎,默认使用OSM和GTFS数据,也可导入其他的数据源.支持CH(Contraction Hierarchies).A*.Dijkstra算法 ...
基于OpenStreetMap地图数据的离线路径规划
距离上次写博客已经好久了,这段时间断断续续也有弄一下关于OpenStreetMap的东西,这次把离线路径规划的实现记录一下. 在OpenStreetMap提供的开源项目中,osmbonuspack提供 ...
【超简单】之基于PaddleSpeech搭建个人语音听写服务
一.[超简单]之基于PaddleSpeech搭建个人语音听写服务 1.需求分析亲们,你们要写会议纪要嘛? 亲们,你们要写会议纪要嘛? 亲们,你们要写会议纪要嘛? 当您面对成吨的会议录音,着急写会议纪 ...
搭建离线瓦片地图服务并用QGIS显示离线地图
需求的提出: 由于业务需求,展示GIS时,不能连接互联网,也就是说不能调用互联网上提供的地图服务. 因为不能联网,所以必须在局域网或本机上搭建离线瓦片地图服务.本文讲述如何搭建离线瓦片 ...
基于PaddleSpeech搭建个人语音听写服务
.需求分析亲们,你们要写会议纪要嘛? 亲们,你们要写会议纪要嘛? 亲们,你们要写会议纪要嘛? 当您面对成吨的会议录音,着急写会议纪要而不得不愚公移山.人海战术?听的头晕眼花,听的漏洞百出,听的怀疑人 ...

基于GraphHopper搭建离线路径规划服务并可视化

效果图：

说明：

主要代码：

基于GraphHopper搭建离线路径规划服务并可视化相关推荐

最新文章

热门文章