高德地图api为我们提供了较全面也很方便的路径规划功能,其中有:公交规划、骑行规划、驾车规划、步行规划,详见开发者文档,对开发者来说很方便,但是总有需求在此之外。比如作者遇到这样的情况,现在想在专网内实现路径规划功能,抛开路径算法不说最关键是没有路网数据,项目处于试水阶段又有可能后期购买路网数据,这该怎么办,如果直接用高德地图api后期要是数据能够跟上,这部分代码将不能复用(作者已用高德地图api做过一版,先期给用户演示用)。
总体思路
为了复用代码,作者决定将前端显示剥离开来,利用OpenLayers实现前端交互功能,后端通过代理高德地图提供的路径规划Web服务,实现查询路径。(ps:该服务有调用次数限制)

关键点
在规划路径时,为了操作的友好性,需要提供两种方式交叉的定位方式。一是,根据关键字查找路径的起止点;二是,通过在地图上点击选择起止点
1.通过关键字搜索查找路径起止点
关键字查找地址可以通过高德地图Web服务中的搜索来实现。前端通过select2接收输入内容,并进行ajax请求后台代理,后台通过代理转发,从高德地图Web搜索服务中查找初结果,并返回给select2予以展示和选择(ps:在此感谢天哥的推荐)。

2.通过地图上操作选择起止点、拖动线路增加经过点
起止点的选择可以通过ol的接口判断图层上有无起止点,实现起止点的新增、修改。
而拖动则必须要实用ol中的Modify



拖拽的同时增加路经点,它的构成时一个ol.Feature和ol.Overlay组合,可以实现路经点的删除,删除的同时重新计算一次路径。


后台代理
后台代理较简单,只要填写好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();
}
网友评论