HTML5绘制上海地铁线路图

 本帖最后由 Mr.Zeng 于 2015-8-24 23:10 编辑

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

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

1. {
   
2. "labels" : [  ... ],
   
3. "stations" : [ ... ],
   
4. "lines" : [ ... ]
   
5. }

复制代码

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

1. {
   
2. "text" : "莘庄",
   
3. "x" : 883.591,
   
4. "y" : 1625.695
   
5. }

复制代码

文字与节点旋转效果
站点数据包含坐标、旋转角度以及编号信息，下面是“莘庄”站的信息

1. {
   
2. "id" : 5,
   
3. "x" : 869.8513512641732,
   
4. "y" : 1597.6559686949402,
   
5. "rotate" : 0.7853981633974483
   
6. }

复制代码

地铁线数据包含名称，颜色，以及经过的站点编号

1. {
   
2. "name" : "1",
   
3. "color" : "#e52035",
   
4. "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,
   
5. 56, 44, 47, 5]
   
6. }

复制代码

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

1. {
   
2. "name" : "3",
   
3. "color" : "#f9d300",
   
4. "stations" : [6, 95, 96, 97, {"id":12,"yOffset":0.5}, {"id":11,"yOffset":0.5}, {"id":8,"yOffset":0.5}, {"id":9,"yOffset":0.5},
   
5. {"id":10,"yOffset":0.5}, {"id":25,"yOffset":0.5}, {"id":26,"yOffset":0.5}, {"id":238,"yOffset":0.5}, {"id":22,"yOffset":-0.5}, {"id":27,"yOffset":-0.5},
   
6. 98, 99, 100, 101, 104, 105, 107, 108, 109, 106, 110, 111]
   
7. }

复制代码

地铁共线效果
创建图元数据需要转换成qunee图元对象，三种类型分别对应三个创建函数
创建文本标签

1. function createText(name, x, y, rotate){
   
2.     var text = graph.createNode(name, x, y);
   
3.     if(rotate){
   
4.         text.rotate = rotate;
   
5.     }
   
6.     text.zIndex = 20;
   
7.     text.image = null;
   
8.     text.setStyle(Q.Styles.BACKGROUND_COLOR, Q.toColor(0x88FFFFFF));
   
9.     text.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_BOTTOM);
   
10.     text.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
    
11.     text.setStyle(Q.Styles.LABEL_PADDING, PADDING);
    
12.     return text;
    
13. }

复制代码

创建站点

1. function createStation(station){
   
2.     var node = graph.createNode(null/**station.name*/, station.x, station.y);
   
3.     node.stationId = station.id;
   
4.     node.setStyle(Q.Styles.LABEL_FONT_SIZE, 10);
   
5.     node.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_MIDDLE);
   
6.     node.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_MIDDLE);
   
7.     node.zIndex = 10;
   
8.     if(station.rotate){
   
9.         node.image = roundRect;
   
10.         node.rotate = station.rotate;
    
11.     }else{
    
12.         node.image = circle;
    
13.     }
    
14.     node.setStyle(Q.Styles.SHAPE_FILL_COLOR, "#FFF");
    
15.     node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, "#000");
    
16.     return node;
    
17. }

复制代码

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

1. function createLine(line){
   
2.     var stations = line.stations;
   
3. 
   
4.     var node = graph.createNode(line.name);
   
5.     node.stations = stations;
   
6.     node.movable = false;
   
7.     node.setStyle(Q.Styles.LABEL_FONT_SIZE, 50);
   
8.     node.setStyle(Q.Styles.LABEL_COLOR, line.color);
   
9.     node.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_BOTTOM);
   
10.     node.setStyle(Q.Styles.LABEL_POSITION, Q.Position.LEFT_TOP);
    
11.     node.setStyle(Q.Styles.LAYOUT_BY_PATH, true);
    
12.     node.anchorPosition = null;
    
13.     node.setStyle(Q.Styles.SHAPE_STROKE, size);
    
14.     node.setStyle(Q.Styles.SHAPE_STROKE_STYLE, line.color);
    
15. 
    
16.     updateLine(node, true);
    
17.     return node;
    
18. }
    
19. 
    
20. function updateLine(line, addListener){
    
21.     var path = new Q.Path();
    
22.     line.image = path;
    
23. 
    
24.     var stations = line.stations;
    
25.     var first = true;
    
26.     Q.forEach(stations, function(s){
    
27.         var station = getStation(s.id || s);
    
28.         if(!station){
    
29.             return;
    
30.         }
    
31.         if(addListener){
    
32.             addLocationChangeListener(station.stationId, line);
    
33.         }
    
34.         var location = station.location;
    
35.         var x = location.x, y = location.y;
    
36.         if(s.yOffset){
    
37.             var offset = s.yOffset * size;
    
38.             var rotate = station.rotate || 0;
    
39.             var sin = Math.sin(rotate);
    
40.             var cos = Math.cos(rotate);
    
41.             x += cos * offset;
    
42.             y += sin * offset;
    
43.         }
    
44.         if(first){
    
45.             first = false;
    
46.             path.moveTo(x, y);
    
47.         }else{
    
48.             path.lineTo(x, y);
    
49.         }
    
50.     })
    
51. }

复制代码

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

1. graph.interactionDispatcher.addListener(function(evt){
   
2.     if(evt.kind != Q.InteractionEvent.ELEMENT_MOVING){
   
3.         return;
   
4.     }
   
5.     var datas = evt.datas;
   
6. 
   
7.     Q.forEach(datas, function(data){
   
8.             if(!data.stationId){
   
9.                 return;
   
10.             }
    
11.             var listeners = stationLocationChangeListeners[data.stationId];
    
12.             if(listeners){
    
13.                 for(var l in listeners){
    
14.                     updateLine(listeners[l]);
    
15.                 }
    
16.             }
    
17.     });
    
18. });

复制代码

在线示例http://demo./#Shanghai Metro Map 2012