/Shanghai-Metro-Map

基于echart实现的上海地铁线路图网页(截止到2021年)。

Primary LanguageJavaScript

Shanghai-Metro-Map

基于Echart实现的上海地铁线路图网页(截止到2021年)。

软件功能

  1. 能够图形化显示地铁线路图。
  2. 能够增加站点。
  3. 能够增加地铁线路。
  4. 能够依据输入的起点和终点计算得到乘车路径。
  5. 能够可视化得到的乘车路径。

设计思路

可视化主要依托的是Echarts中的关系图。依据该库绘制地铁线路图时只需要给出站点的名字、x坐标、y坐标,就可以绘制点,再给出连线的起点和终点就可以绘制连线。而其中最为关键的站点名字和坐标我是通过Python的爬虫来获得的,来源于百度地图-上海地铁线路图,经过爬虫的爬取后,再经过Python的文本处理得到对应的需要的信息,而对于连线的起点和终点,采用的是手动查找每条线路拥有的站点再加上Python的文本处理来完成的,而后再对颜色和线路弯曲程度进行微调,同时对于所有的换乘站,将其节点替换为换乘图片,最后得到的结果如下:

image

放大后:

image

支持增加线路:

image

支持增加站点:

image

可以添加可连接站点:

image

支持两种路线查询:

image

支持保存添加的站点和线路:

这里由于浏览器的权限控制的原因,不能够直接修改本机电脑上的数据,所以初始的站点信息都是在程序中写死的,即一刷新就会变为初始的信息,而如果要保存,这里给出的解决办法是将文件下载下来,之后要用这个增加过的地图时重新选择该下载好的地图文件上传。

乘车路径查找算法

计算乘车路径主要采用的是基于代价搜索的广度优先算法

流程图如下:

image

首先是得到起始站和终点站的名字,然后根据起始站的名字得到起始站对应的站点信息,并且记为现在站点,代价值+1,然后查看该现在站点所能连接的所有其他站点,以此取出这些相邻站点,如果该站点不在已经遍历过的非换乘站点并且不在之前这个现在站点所记录的走过的站点里,则继续往下看,否则换下一个相邻站点。继续往下看时,需要判断是否需要换乘地铁,查看现在站点所在的线路能否直接到达该相邻点,这里通过相同线路的数目来进行判断,因为有些相邻站点可以有2条线路到达。如果相同线路数为0,则说明需要换乘,则继续查看该站点所在的所有线路与该相邻站点所在的所有线路的重合线路,从而得到达到该相邻站点的线路,同时换乘数+1,代价值也加上换乘数对应的代价;如果不为0,则继续。之后比较换乘数是否小于等于6,这里主要是为了控制换乘数量,如果换乘数量大于6则基本为乱走的节点,可以删除;否则,将该节点放入到队列之中。

遍历完了所有的相邻点之后,弹出队列之中代价值最小的节点,将该节点当做现在节点,继续循环,直到现在点的名字与终点相同。而后根据节点记录的信息进行可视化。

该程序有2种线路查询,一种是较为便捷的线路,即愿意以换乘来换取速度,另一种是少换乘的线路,即能不换乘就不换乘。而这2中的实现主要依靠的是对于换乘代价值的处理,如下:

image

param==0是较为便捷的线路,即初次换乘相当于多坐2个站,而后第二次换乘相当于多坐3个站,以此类推,最多换乘4次。否则就是少换乘了,即每一次换乘所产生的代价都是巨大的不能依靠换乘后少坐几站来抵偿。

在从同济大学到迪士尼的线路中可以很好地体现:

较便捷线路:

image

少换乘线路:

image

项目整体结构

image