某市政项目要用到地铁图，展示上海地铁站点以及相关信息流，尝试使用html5技术来实现，自己折腾有点慢，找到一个html5的图形组件-qunee for html5，简单学习一下，就可以很好的解决这类需求，做出优美的展现，下面以上海2012地铁图为例，效果如下：
示例讲解
首先需要解决数据问题，可以从维基百科或者上海地铁官网中获取，不过也免不了人工，要达到良好的显示效果，需要不只要记录站点的位置，还需要设置文本标签的理想位置，有时为了避免文字叠加，需要设置旋转角度……总之事在人为，想想办法，最终解决了数据问题，再加上qunee图形组件的强大展示效果，做出来可以交互的在线地铁图
数据格式
采用json格式数据，分三种类型：文本标签、站点、地铁线
总的结构如下：
{
labels : [ ... ],
stations : [ ... ],
lines : [ ... ]
}
复制代码
文本标签数据
包含坐标和文字信息，如果文字需要旋转，则会增加”rotate”属性，下面是“莘庄”文本标签信息
{
text : 莘庄,
x : 883.591,
y : 1625.695
}
复制代码
文字与节点旋转效果
站点数据
包含坐标、旋转角度以及编号信息，下面是“莘庄”站的信息
{
id : 5,
x : 869.8513512641732,
y : 1597.6559686949402,
rotate : 0.7853981633974483
}
复制代码
地铁线数据
包含名称，颜色，以及经过的站点编号
{
name : 1,
color : #e52035,
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]
}
复制代码
对于特殊情况，比如两条地铁线共用一条线路的情况，会出现两条线重合，为了避免这种情况，还可以指定站点横向偏移量，比如上面一号线中的如下数据
{id: 21, yoffset: 0.5}
复制代码
因为上海地铁三号线与四号线共用线路较多，所以这种处理更加明显
三号线数据
{
name : 3,
color : #f9d300,
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},
{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},
98, 99, 100, 101, 104, 105, 107, 108, 109, 106, 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.styles.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.name*/, station.x, station.y);
node.stationid = 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.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;
var node = graph.createnode(line.name);
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.position.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 = line.stations;
var first = true;
q.foreach(stations, function(s){
var station = getstation(s.id || s);
if(!station){
return;
}
if(addlistener){
addlocationchangelistener(station.stationid, line);
}
var location = station.location;
var x = location.x, y = location.y;
if(s.yoffset){
var offset = s.yoffset * size;
var rotate = station.rotate || 0;
var sin = math.sin(rotate);
var cos = math.cos(rotate);
x += cos * offset;
y += sin * offset;
}
if(first){
first = false;
path.moveto(x, y);
}else{
path.lineto(x, y);
}
})
}
复制代码
交互处理
增加交互处理，监听站点拖动事件，保持地铁路线跟随站点位置变化
graph.interactiondispatcher.addlistener(function(evt){
if(evt.kind != q.interactionevent.element_moving){
return;
}
var datas = evt.datas;
q.foreach(datas, function(data){
if(!data.stationid){
return;
}
var listeners = stationlocationchangelisteners[data.stationid];
if(listeners){
for(var l in listeners){
updateline(listeners[l]);
}
}
});
});
复制代码
在线示例
来源：http://blog.chinaunix.net/uid-29563534-id-4171575.html