某市政工程使用地铁地图显示来显示地铁站及相关信息流。使用Qunee组件可以很好地解决这种需求，做出漂亮的显示。以下以上海2012地铁地图为例，效果如下：

上海2012地铁地图效果

示例说明

首先要解决数据问题，可以从维基百科或者上海铁路官网获取，但是不可避免的要手工操作。为了达到良好的显示效果，不仅需要记录站点的位置，还需要设置文本标签的理想位置。有时候为了避免文字叠加，需要设置旋转角度.总之东西都是人工的，想办法，最后解决数据问题，再加上Qunee图形组件强大的显示效果，做出一张互动的在线地铁地图。

数据格式

JSON格式的数据有三种：文本标签、站点和地铁线路

总体结构如下：

{

标签' : [.],

电台' : [.],

line ' :[.]

}

文本标签数据

包含坐标和文本信息。如果文本需要旋转，会添加“旋转”属性。以下是“莘庄”的文字标签信息

{

正文' : '莘庄'，

x' : 883.591，

y' : 1625.695

}

文本和节点旋转效果

文本和节点旋转效果

站点数据

包括坐标、旋转角度和数字信息，以下是“新庄”站的信息

{

id' : 5，

x' :869.8513512641732

y' :1597 . 666666666616

旋转0。58860 . 88888888861

}

地铁线路数据

包含通过站点的名称、颜色和编号

{

名称' : '1 '，

颜色' : '#e52035 '，

电台' : [64，70，67，71，72，65，69，73，66，68，63，62，22，61，60，{'id': 21，' YofSet ' : 0 0.5 }，59，{'id': 18，' YofSet ' :-0.5 }，17，58，14，7，57，6，

56, 44, 47, 5]

}

对于特殊情况，如两条地铁线路共用一条线路的情况，两条线路会重叠。为了避免这种情况，还可以指定站的横向偏移，如上述1号线中的以下数据

{'id': 21，' yOffset ' : 0.5 }

因为上海地铁3号线和4号线共用线路较多，所以这种待遇更明显

3号线数据

{

名称' : '3 '，

颜色' : '#f9d300 '，

电台' : [6，95，96，97，{'id':12，' YofSet ' :0.5 }，{'id':11，' YofSet ' :0.5 }，{'id':8，' YofSet ' :0.5 }，{'id':9，' YofSet ' :0.5 }，

{'id':10，' yOffset':0.5}，{'id':25，' yOffset':0.5}，{'id':26，' yOffset':0.5}，{'id':238，' yOffset ' 3:0.5 }，{'id':22，' yOffset':

98, 99, 100, 101, 104, 105, 107, 108, 109, 106, 110, 111]

}

地铁共线效应

地铁共线效应

创建实体

数据需要转换成qunee原语对象，三种类型分别对应三种创建函数

创建文本标签

函数createText(name，x，y，rotate){

var text=graph.createNode(name，x，y)；

if(旋转){

text.rotate=rotate

}

text.zIndex=20

text.image=null

text . setstyle(Q . style . background _ COLOR，Q . to COLOR(0x 88 ffffff))；

text . setstyle(Q . style . label _ ANCHOR _ POSITION，Q . POSITION . left _ BOTTOM)；

text . setstyle(Q . style . label _ POSITION，Q . POSITION . center _ MIDDLE)；

text . setstyle(Q . style . LABEL _ PADDING，PADDING)；

返回文本；

}

创建网站

函数createStation(站){

var node=graph . create node(null/* * station . name */，station.x，station . y)；

node . Station id=station . id；

node . setstyle(Q . style . LABEL _ FONT _ SIZE，10)；

node . setstyle(Q . style . 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 . style . shape _ FILL _ COLOR，' # FFF ')；

node . setstyle(Q . STYLE . SHAPE _ STYLe，' # 000 ')；

返回节点；

}

创建地铁线路

createLine(…)函数用于创建地铁线路，该线路使用节点类型原语并将节点体设置为路径，updateLine(…)函数用于根据站点信息自动生成线路路径

函数createLine(line){

var stations=line.stations

var node=graph . create node(line . name)；

node.stations=stations

node.movable=false

节点。setstyle(Q . style。LABEL _ FONT _ SIZE，50)；

节点。setstyle(Q . style。LABEL _ COLOR，第行。COLOR)；

节点。setstyle(Q . style。标签_锚_位置，Q .位置。left _ BOOTH)；

节点。setstyle(Q . style。标签位置。left _ TOP)；

节点。setstyle(Q . style。layout _ BY _ PATH，true)；

node.anchorPosition=null

节点。setstyle(Q . style。shape _ STROKE，size)；

节点。setstyle(Q . STYLE。shape _ STYLe _ STYLe，line。颜色)；

updateLine(节点，true)；

返回节点；

}

函数updateLine(line，addListener){

var路径=新q . Path()；

line.image=path

var stations=line.stations

var first=true

Q.forEach(站、功能)

var station=GetStation(s . id | | s)；

if(！站){

返回；

}

if(addListener){

addLocationChangeListener(电台。站id，线路)；