1 前言
以前粗略学习了一下在地图中实现最短路径,并在切图工具中实现了自动处理生成导航相关数据。
https://blog.csdn.net/bq_cui/article/details/86795213
最近发现工具实现的结果,错误一大堆。这次再详细捋一捋整个步骤,感兴趣的同学可以试一试。
2 基本步骤
以Astar为寻路算法的讨论非常多,csdn上文章不计其数。
原理了解了,具体实现起来,如果纯粹手工操作,还是挺麻烦的。
但是用工具实现起来就相对比较简单了。
第一步 制作手绘图并切片加工后覆盖到地图
这个不是必须的步骤,不过有手绘图毕竟比较好看一点。
第二步 根据手绘图制作大小相同的灰度路径图
就是制作一个纯黑的图,然后把路径上的黑色用橡皮擦擦成透明。
第三步 用切图工具生成路径数据
这个步骤实际就是程序对灰度路径图进行矢量计算,生成矩阵数据。通过调用这些数据,计算出最短路径。
下面以广州大学桂花岗校区为例粗略演示一下。
3 制作手绘图和路径图
假定手绘图已经找专业画师做好了,广州大学桂花岗校区手绘.png。是这样的:
![](https://img-blog.csdnimg.cn/img_convert/624032df4e4b9224abb34f618b30067c.png)
用原来的方法贴到地图上,很简单的几个步骤就行。
这里简单演示一下用Photoshop制作路径图。
ps中,新加一个纯黑图层,然后根据手绘图擦除路径上的黑色,保存为png格式。这个过程需要仔细擦除道路,比较费时间。
![](https://img-blog.csdnimg.cn/img_convert/263021135f2e76e709a34613a807794d.gif)
完成后另存为:广州大学桂花岗校区道路.png。
![](https://img-blog.csdnimg.cn/img_convert/c6e16edba7982af5528e960dc74630cf.png)
4 手绘图贴到地图上
4.1 配准
![](https://img-blog.csdnimg.cn/img_convert/a48a5e67bb4d27b3df8eb7d48d468e60.gif)
基本设置中,注意不要选大图模式。
4.2切图
![](https://img-blog.csdnimg.cn/img_convert/22598680ec1f120f7067692b9029880b.gif)
4.3 切图完成,浏览一下
![](https://img-blog.csdnimg.cn/img_convert/3817b0f714c4f37b4bedc20d0a3bd631.gif)
可以看到贴图正常。
5 生成路径数据
切到“实验室”页签,路径图片选中前面的路径文件“广州大学桂花岗校区道路.png”。
点密度设置为80。如果后面路径搜索不成功,可以增大点密度。但是增大点密度会增加数据文件体积。
点击“生成导航”。
![](https://img-blog.csdnimg.cn/img_convert/60e719da7ba6b90e74b939b56d9822aa.gif)
点击重置图片——设置为18级——点配准——弹出提示后选择“否”——点击生成导航参数。
这样就完成了,在输出文件夹可以看到astar.js文件。
6 试一下寻路效果
浏览器中打开map_tx.html。
左键为设置路径起点,右键为设置路径终点。
默认已经设置左上角为起点,可以直接点击左键设置路径终点,看能不能找出最短路径。
![](https://img-blog.csdnimg.cn/img_convert/b71df3e0ad6329fd3d35477ba04b1b23.gif)
![](https://img-blog.csdnimg.cn/img_convert/bd9dab63907badaa65e15ecc48959986.gif)
可以看出有的地方,可能由于点密度较低,无法生成路径,这可以通过调整路径图片,以及增加点密度解决。
7 缺点
这种方法目前缺点很明显。
a 景区面积较大、路径复杂情况下,生成的数据文件较大;
b 路径较细、点密度设置较低,很容易造成路径中断,需要调整路径粗细和增大点密度处理;
注意,该寻路功能目前仅适配了腾讯地图,其他地图需要自行修改,估计很容易。
8 软件下载
这个下载包中,包含软件、前面制作的手绘图和路径图以及psd源图:
https://www.1hwj.net/forum.php?mod=viewthread&tid=1&page=1&extra=#pid1
以前写过的地图切片相关博文: