HTML5绘制上海地铁线路图

HTML5绘制上海地铁线路图

某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下:
上海2012地铁图效果 1_

示例讲解

首先需要解决数据问题,可以从维基百科或者上海地铁官网中获取,不过也免不了人工,要达到良好的显示效果,需要不只要记录站点的位置,还需要设置文本标签的理想位置,有时为了避免文字叠加,需要设置旋转角度……总之事在人为,想想办法,最终解决了数据问题,再加上Qunee图形组件的强大展示效果,做出来可以交互的在线地铁图

数据格式

采用JSON格式数据,分三种类型:文本标签、站点、地铁线

总的结构如下:

文本标签数据

包含坐标和文字信息,如果文字需要旋转,则会增加”rotate”属性,下面是“莘庄”文本标签信息

文字与节点旋转效果

文字与节点旋转效果 2_

站点数据

包含坐标、旋转角度以及编号信息,下面是“莘庄”站的信息

地铁线数据

包含名称,颜色,以及经过的站点编号

对于特殊情况,比如两条地铁线共用一条线路的情况,会出现两条线重合,为了避免这种情况,还可以指定站点横向偏移量,比如上面一号线中的如下数据

因为上海地铁三号线与四号线共用线路较多,所以这种处理更加明显

三号线数据

地铁共线效果

地铁共线效果 3_

创建图元

数据需要转换成qunee图元对象,三种类型分别对应三个创建函数

创建文本标签

创建站点

创建地铁线

createLine(…)函数用于创建地铁线,使用了节点类型图元,并设置节点主体为路径,函数updateLine(…)用于从站点信息自动生成线路路径

交互处理

增加交互处理,监听站点拖动事件,保持地铁路线跟随站点位置变化

未经允许不得转载:淘淘源码吧 » HTML5绘制上海地铁线路图