高德地图api为我们提供了较全面也很方便的路径规划功能，其中有：公交规划、骑行规划、驾车规划、步行规划，详见开发者文档，对开发者来说很方便，但是总有需求在此之外。比如作者遇到这样的情况，现在想在专网内实现路径规划功能，抛开路径算法不说最关键是没有路网数据，项目处于试水阶段又有可能后期购买路网数据，这该怎么办，如果直接用高德地图api后期要是数据能够跟上，这部分代码将不能复用(作者已用高德地图api做过一版，先期给用户演示用)。
总体思路
为了复用代码，作者决定将前端显示剥离开来，利用OpenLayers实现前端交互功能，后端通过代理高德地图提供的路径规划Web服务，实现查询路径。(ps：该服务有调用次数限制)
image.png
关键点
在规划路径时，为了操作的友好性，需要提供两种方式交叉的定位方式。一是，根据关键字查找路径的起止点；二是，通过在地图上点击选择起止点
1.通过关键字搜索查找路径起止点
关键字查找地址可以通过高德地图Web服务中的搜索来实现。前端通过select2接收输入内容，并进行ajax请求后台代理，后台通过代理转发，从高德地图Web搜索服务中查找初结果，并返回给select2予以展示和选择(ps：在此感谢天哥的推荐)。
image.png
2.通过地图上操作选择起止点、拖动线路增加经过点
起止点的选择可以通过ol的接口判断图层上有无起止点，实现起止点的新增、修改。
而拖动则必须要实用ol中的Modify
image.png
image.png
image.png
拖拽的同时增加路经点，它的构成时一个ol.Feature和ol.Overlay组合，可以实现路经点的删除，删除的同时重新计算一次路径。
image.png
image.png
后台代理
后台代理较简单，只要填写好url及参数构成的Map进行调用就可以来。
public String client(String url, HttpMethod method, MultiValueMap<String, String> params){
RestTemplate client = new RestTemplate();
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
HttpEntity<MultiValueMap<String, String>> requestEntity = new HttpEntity<MultiValueMap<String, String>>(params, headers);
ResponseEntity<String> response = client.exchange(url, HttpMethod.POST, requestEntity, String.class);
return response.getBody();
}
网友评论