HTML5绘制上海地铁线路图

1、html5绘制上海地铁线路图某市政项目用到地铁图展示，展示地铁站点以及相关信息流，用法qunee组件可以很好的解决这类需求，做出柔美的呈现，下面以上海2012地铁图为例，效果如下：上海2012地铁图效果 示例讲解首先需要解决数据问题，可以从维基百科或者上海地铁官网中猎取，不过也免不了人工，要达到良好的显示效果，需要不只要记录站点的位置，还需要设置文本标签的抱负位置，有时为了避开文字叠加，需要设置旋转角度总之事在人为，想想方法，终于解决了数据问题，再加上qunee图形组件的强大展示效果，做出来可以交互的在线地铁图 数据格式采纳json格式数据，分三种类型：文本标签、站点、地铁线 总的结构如下：

2、"labels" : . ,"stations" : . ,"lines" : . 文本标签数据包含坐标和文字信息，假如文字需要旋转，则会增强rotate属性，下面是莘庄文本标签信息 "text" : "莘庄","x" : 883.591,"y" : 1625.695文字与节点旋转效果文字与节点旋转效果 站点数据包含坐标、旋转角度以及编号信息，下

3、面是莘庄站的信息 "id" : 5,"x" : 869.8513512641732,"y" : 1597.6559686949402,"rotate" : 0.7853981633974483地铁线数据包含名称，色彩，以及经过的站点编号 "name" : "1","color" : "e52035",&

4、quot;stations" : 64, 70, 67, 71, 72, 65, 69, 73, 66, 68, 63, 62, 22, 61, 60, "id": 21, "yoffset": 0.5, 59, "id": 18, "yoffset": -0.5, 17, 58, 14, 7, 57, 6,56, 44, 47, 5对于特别状况，比如两条地铁线共用一条线路的状况，会浮现两条线重合，为了避开这种状况，还可以指定站点横向

5、偏移量，比如上面一号线中的如下数据 "id": 21, "yoffset": 0.5由于上海地铁三号线与四号线共用线路较多，所以这种处理越发显然 三号线数据"name" : "3","color" : "f9d300","stations" : 6, 95, 96, 97, "id":12,"

6、yoffset":0.5, "id":11,"yoffset":0.5, "id":8,"yoffset":0.5, "id":9,"yoffset":0.5,"id":10,"yoffset":0.5, "id":25,"yoffset&

7、amp;quot;:0.5, "id":26,"yoffset":0.5, "id":238,"yoffset":0.5, "id":22,"yoffset":-0.5, "id":27,"yoffset":-0.5,98, 99, 100, 101, 104, 105, 107, 108, 109, 106,

8、 110, 111地铁共线效果地铁共线效果 创建图元数据需要转换成qunee图元对象，三种类型分离对应三个创建函数 创建文本标签function createtext(name, x, y, rotate) var text = graph.createnode(name, x, y); if(rotate) text.rotate = rotate; text.zindex = 20; text.image = null; text.setstyle(q.styles.background_color, q.tocolor(0x88ffffff); text.setstyle(q.style

9、s.label_anchor_position, q.position.left_bottom); text.setstyle(q.styles.label_position, q.position.center_middle); text.setstyle(q.styles.label_padding, padding); return text; 创建站点function createstation(station) var node = graph.createnode(null/**/, station.x, station.y); node.stationid

10、 = station.id; node.setstyle(q.styles.label_font_size, 10); node.setstyle(q.styles.label_anchor_position, q.position.center_middle); node.setstyle(q.styles.label_position, q.position.center_middle); node.zindex = 10; if(station.rotate) node.image = roundrect; node.rotate = station.rotate; else node.

11、image = circle; node.setstyle(q.styles.shape_fill_color, "fff"); node.setstyle(q.styles.shape_stroke_style, "000"); return node; 创建地铁线createline()函数用于创建地铁线，用法了节点类型图元，并设置节点主体为路径，函数updateline()用于从站点信息自动生成线路路径 function createline(line) var stations = line.stations; v

12、ar node = graph.createnode(); node.stations = stations; node.movable = false; node.setstyle(q.styles.label_font_size, 50); node.setstyle(q.styles.label_color, line.color); node.setstyle(q.styles.label_anchor_position, q.position.left_bottom); node.setstyle(q.styles.label_position, q.positio

13、n.left_top); node.setstyle(q.styles.layout_by_path, true); node.anchorposition = null; node.setstyle(q.styles.shape_stroke, size); node.setstyle(q.styles.shape_stroke_style, line.color); updateline(node, true); return node; function updateline(line, addlistener) var path = new q.path(); line.image = path; var stations