某市政项目用到地铁图展示，展示地铁站点以及相关信息流，使用Qunee组件可以很好的解决这类需求，做出优美的展现，下面以上海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]
}
地铁共线效果
