项目中集成了高德开放平台地铁图 JS API 传送门,经过长期的功能迭代,甲方提出了各种定制化需求来优化体验,而使用这种第三方SDK就很难满足;因此如果自己开发一套地铁线路图引擎,从功能和体验上达到完全可控,可完美满足用户需求;
技术分析
- 画布大小,元素坐标点确认,需要开发一套管理台,标记地图大小、元素坐标位置、元素连接关系等,在此不多赘述
- 线路图绘制,这个实现方式有很多,移动WEB通过纯JS "svg"标签即可实现;如果采用RN技术栈,推荐使用react-native-svg第三方库实现;具体绘制实现思路轻点
- 地图路径搜索,将整个地图的所有连接点保存成有向图,通过地图寻路算法快速找出最短路径,此次的重点就是如何实现寻路算法!
重要概念
有向图
相对于无向图产生,无向图描述了所有顶点之间的连接关系,每两个顶点关系是双向的,而有相图不是,例如:A单向通向B,A->B,但反过来就不行;具体描述关系如下: