某市政項(xiàng)目用到地鐵圖展示，展示地鐵站點(diǎn)以及相關(guān)信息流，使用Qunee組件可以很好的解決這類(lèi)需求，做出優(yōu)美的展現(xiàn)，下面以上海2012地鐵圖為例，效果如下：
示例講解
首先需要解決數(shù)據(jù)問(wèn)題，可以從維基百科或者上海地鐵官網(wǎng)中獲取，不過(guò)也免不了人工，要達(dá)到良好的顯示效果，需要不只要記錄站點(diǎn)的位置，還需要設(shè)置文本標(biāo)簽的理想位置，有時(shí)為了避免文字疊加，需要設(shè)置旋轉(zhuǎn)角度……總之事在人為，想想辦法，最終解決了數(shù)據(jù)問(wèn)題，再加上Qunee圖形組件的強(qiáng)大展示效果，做出來(lái)可以交互的在線地鐵圖
數(shù)據(jù)格式
采用JSON格式數(shù)據(jù)，分三種類(lèi)型：文本標(biāo)簽、站點(diǎn)、地鐵線
總的結(jié)構(gòu)如下：
{
"labels" : [ ... ],
"stations" : [ ... ],
"lines" : [ ... ]
}
文本標(biāo)簽數(shù)據(jù)
包含坐標(biāo)和文字信息，如果文字需要旋轉(zhuǎn)，則會(huì)增加”rotate”屬性，下面是“莘莊”文本標(biāo)簽信息
{
"text" : "莘莊",
"x" : 883.591,
"y" : 1625.695
}
文字與節(jié)點(diǎn)旋轉(zhuǎn)效果
站點(diǎn)數(shù)據(jù)
包含坐標(biāo)、旋轉(zhuǎn)角度以及編號(hào)信息，下面是“莘莊”站的信息
{
"id" : 5,
"x" : 869.8513512641732,
"y" : 1597.6559686949402,
"rotate" : 0.7853981633974483
}
地鐵線數(shù)據(jù)
包含名稱(chēng)，顏色，以及經(jīng)過(guò)的站點(diǎn)編號(hào)
{
"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]
}
對(duì)于特殊情況，比如兩條地鐵線共用一條線路的情況，會(huì)出現(xiàn)兩條線重合，為了避免這種情況，還可以指定站點(diǎn)橫向偏移量，比如上面一號(hào)線中的如下數(shù)據(jù)
{"id": 21, "yOffset": 0.5}
因?yàn)樯虾５罔F三號(hào)線與四號(hào)線共用線路較多，所以這種處理更加明顯
三號(hào)線數(shù)據(jù)
{
"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]
}
地鐵共線效果
創(chuàng)建圖元
數(shù)據(jù)需要轉(zhuǎn)換成qunee圖元對(duì)象，三種類(lèi)型分別對(duì)應(yīng)三個(gè)創(chuàng)建函數(shù)
創(chuàng)建文本標(biāo)簽
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;
}
創(chuàng)建站點(diǎn)
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;
}
創(chuàng)建地鐵線
createLine(…)函數(shù)用于創(chuàng)建地鐵線，使用了節(jié)點(diǎn)類(lèi)型圖元，并設(shè)置節(jié)點(diǎn)主體為路徑，函數(shù)updateLine(…)用于從站點(diǎn)信息自動(dòng)生成線路路徑
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); } }) }
交互處理
增加交互處理，監(jiān)聽(tīng)站點(diǎn)拖動(dòng)事件，保持地鐵路線跟隨站點(diǎn)位置變化
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]); } } }); });
在線示例