[2016年底鉅獻] — HTML5可交互地鐵線路圖（第二季：帝都進階版）

兩個月前（是的，兩個月過去了，歲月如梭），哥幫小弟作的「HTML5魔都地鐵拖拖樂」打了下廣告，沒想到一炮而紅，好評如潮。如今的年輕人，仍是很上進的，一被表揚，動力無窮。年末雖然忙得眼底發黑，小弟硬是忙裏偷閒又作了一個帝都的版本。

這個版本，不光是換成了帝都的地鐵圖，還增長了不少聽起來就很能「變現」的功能：線路規劃、站點告警展現、站點內部電路圖、站點三維呈現……在這個信息過剩的年代，多數人都是涉獵很廣卻學而不精，小弟這種對問題進行深度挖掘的精神，哥真的很佩服。

------------------------------------------------下面進入正題-----------------------------------------------------------

一些基本功能這裏再也不贅述，你們能夠查看上一篇有關魔都地鐵圖的文章。哥今天主要給你們介紹新增功能。

咱們先來看一下小弟作的帝都地鐵圖的效果，基本上是參照baidu的地鐵圖來複現的：

依然是純矢量、可交互、有動態效果、無失真縮放的拓撲圖：

可視化效果具體就不展開了，拿到過拖拖樂的兄弟們都瞭解。下面主要仍是說說此次新增的功能點，怎麼形容呢？殺很大噢~

選中線路會發光

鼠標點擊某條地鐵線路，選中的線路會以發光的形式突出顯示出來。

小弟說之因此要增長這個功能，是由於如今的地鐵線路太多了，想查看單條線路的時候常常會看串……也是，雖然交通部門在設計地鐵線路圖的時候已經儘可能用不一樣的顏色去標註每條線路，可是擋不住地鐵十幾二十條地往上加，要想查看單條線路還真是費勁。有了這個功能，頓時清爽了不少有木有？ 哥必須爲這個功能點個贊……

實現代碼其實很簡單：

function changeAlpha(lineNumber,alpha){
        alpha = alpha || 1;
        var list = lines[lineNumber];
        list.forEach(function(li){
            li.setStyle('whole.alpha',alpha);
            li.s('outer.style', alpha < 1 ? 'none':'glow');
            li.s('label.shadowable', alpha >= 1 );
        });
        list = stations[lineNumber];
        list.forEach(function(li){
            li.setStyle('whole.alpha',alpha);
            li.s('outer.style', alpha < 1 ? 'none':'glow');
            li.s('label.shadowable', alpha >= 1 );
        });
    }

爲啥這麼好的想法，地圖廠商都不提供呢？若是你對仍然體會不是很深入的話，看看下面這張圖，相信你會以爲這個功能是多麼賞心悅目……

高亮顯示兩站點間的路線

用鼠標右鍵點擊同一條線路上的兩個站點，這兩個站點之間的路線會高亮顯示。小弟說，從用戶角度來講，這個功能能夠用來進行路線的規劃。不過通常咱們不會在前端作路線規劃，只須要把計算好的路線結果顯示出來就能夠了。小弟作這個功能的另外一個目的是爲了方便運維人員查看某一段線路上的告警站點。

告警站點一目瞭然

說到告警，才進入了此次的重點。

地鐵因運量大、速度快、無堵車等優勢，已經成爲衆多上班族的首選出行方式。一旦地鐵發生故障，會致使大量乘客滯留。所以，對於地鐵運維人員來講，可以快速發現故障站點並及時排除故障就顯得尤其重要。

咱們能夠看到，小弟作的這張帝都地鐵圖，與普通地鐵圖最大的不一樣是上面增長了許多五光十色的告警標識，告警站點一目瞭然，上面還標明瞭告警的數量以及告警級別。這樣，地鐵運維人員就能夠快速掌握各地鐵站點的告警狀況，合理安排故障排查的優先級。

由於咱們公司是作企業應用的嘛，這個功能是很容易放上去的，代碼也不復雜。

Util.addAlarm("alarm" + p['-sid'], n, twaver.AlarmSeverity.severities.get(random), box.getAlarmBox(),random);
addAlarm: function (alarmID, staNode, alarmSeverity, alarmBox,random) {
  var alarm = new twaver.Alarm(alarmID, staNode.getId(), alarmSeverity);
  alarm.setClient("MAPPINGID",this.alarmCode[random]);
  alarm.setClient("raisedTime",new Date());
  alarm.setClient("platform",staNode.getName());
  alarm.setAcked(Math.random()* 10 > 5? true:false);
  alarmBox.add(alarm);
}

軌線告警數據展現

雙擊一條線路，會彈出該線路的全部告警數據，包括告警站臺、告警級別、告警發生時間等詳細信息。這裏用的是現成的表格組件。

實現也很簡單，首先兩行代碼將表格和DataBox關聯：

var table = new twaver.controls.Table(box.getAlarmBox());
var tablePane = new twaver.controls.TablePane(table);

而後用如下代碼實現：

var alarmSeverity = {
        Critical: "嚴重",
        Major:'主要',
        WARNING:'警告',
    } 
    table.onCellRendered = function (params) {
        if (params.column.getName() === '告警級別') {
            params.div.style.backgroundColor = params.data.getAlarmSeverity().color;
        }
    };
    var column = createColumn(table, '站臺', 'platform', 'client', 'string',100,40);
    column.setHorizontalAlign('center');
    var column = createColumn(table, '告警級別', 'alarmSeverity', 'accessor', 'string', true);
    column.setWidth(80);
    column.setHorizontalAlign('center');
    var setValue = column.setValue;
    column.setValue = function (data, value, view) {
        value = twaver.AlarmSeverity.getByName(value);
        setValue.call(column, data, value, view);
    };
    column.setEnumInfo(twaver.AlarmSeverity.severities.toArray());
    var column = createColumn(this.table, '告警碼', 'MAPPINGID', 'client','string',166);
    column.setHorizontalAlign('center');
    var column = createColumn(this.table, '告警問題', 'alarmque', 'client');
    column.setHorizontalAlign('center');
    var timeColumn = createColumn(table, '告警發生時間', 'raisedTime', 'client');
    timeColumn.setWidth(167);
    timeColumn.setHorizontalAlign('center');
    timeColumn.renderCell = function (params) {
        var span = document.createElement('span');
        span.innerHTML = formatDate(params.value, 'yyyy-MM-dd hh:mm:ss');
        span.style.whiteSpace = 'nowrap';
        params.div.appendChild(span);
    }
}

站點信息展現

單擊站點，會彈出一個功能菜單，如今有展現、告警、電路等模塊。小弟說還能夠根據須要，定製更多功能模塊，全方位展現站點信息。咱們一一來看幾個菜單都展現了些啥。

單個站點告警

點擊「告警」，彈出站點告警數據，還能夠查看該站點的歷史告警數據。

小弟說，前幾天他去看了一個很高大上的軌道交通技術展會，瞭解到每一個站點內就有大量的設備，像電力設備、環控設備、屏蔽門設備、電梯設備、門禁設備、廣播和閉路電視設備、通信設備等等。所以，每一個站點也必需要有集中的告警展現。固然，如今作的還比較簡單，若是有真實數據，就能作得更好看了，反正菜單定義都很方便。

站點內部拓撲圖展現

地鐵裏的通訊系統仍是比較複雜的，據我瞭解，除了有專用的通訊系統外，還要提供民用的通訊系統，以及專用的電源管理、廣播、視頻監控等等子系統。這就必需要我們擅長的拓撲圖上場了。

點擊「圖紙」按鈕，彈出站點內部設備的拓撲圖。全部的圖元均可以拖拽、縮放，告警、分組這些該有的功能都有，若是拓撲圖有多個層級，不停往下加layer就行了。

代碼稍複雜：

button.onclick = function (e) {
    var dialog = document.getElementById(id);
    dialog && document.body.removeChild(dialog);
    var box2 = new twaver.ElementBox();
    var network2 = new twaver.vector.Network(box2);
    var view = network2.getView();
    var autoLayouter = new twaver.layout.AutoLayouter(box2);
        // network2.setZoomManager(new twaver.vector.MixedZoomManager(network2,false));
        var items = Util.topo_data;
        var i,item;
        for(i = 0;i < items.length; i++){
            item = items[i];
            Util.createElement(box2, item);
        }
        var self = this;
        var hGap=80;
        autoLayouter.getDimension=function (node) {
            if (node instanceof twaver.Group && node.getChildrenSize() > 0) {
                var rect = null;
                for (var i = 0, n = node.getChildrenSize(); i < n; i++) {
                    var child = node.getChildAt(i);
                    if (child instanceof twaver.Node) {
                        if (rect) {
                            rect = _twaver.math.unionRect(rect, child.getRect());
                        } else {
                            rect = child.getRect();
                        }
                    }
                }
                if (rect) {
                    return { width: rect.width+hGap, height: rect.height };
                } else {
                    return null;
                }
            } else {
                return { width: node.getWidth()+hGap, height: node.getHeight() };
            }
        },
        autoLayouter.doLayout('hierarchic', function(){
            network2.zoomOverview();
        });
        var left = e.clientX, top = e.clientY;
        var width = 760, height = 360;
        Util.showTopo('dialog_topo',element,network2,width+"px",height+"px",'260px','0px','圖紙');
        Util.changeState();
        $('#dialog_topo').animate({
            top:'100px',
        },'normal','swing',function(){
        });
    }

站點三維展現

這個功能可謂是很趕時髦的，點擊「展現」模塊，跳出當前站點的三維展現圖，重點標識了幾個出口的位置。

小弟說如今地鐵站的出口示意圖通常都是平面圖，或者是假3D圖，身邊有些妹子常常表示看不太懂，尤爲在一些比較複雜的換乘站點，因此整了個3D示意圖，還能夠任意角度旋轉、縮放什麼的。整個過程個人注意力就被「妹子」吸引了，不得不說爲了妹子，小弟的這個地鐵站但是像模像樣的。

模型內部也能夠進入，用來展現一些消防用具的位置。不過這地鐵內部，我越看越以爲像某部喪屍片呢……

電路展現

最後，點擊「電路」模塊，彈出站點內部電路圖。若是對接上地鐵的供配電系統，那仍是這個展現平臺上至關不錯的一個亮點。

功能介紹到這裏就基本結束了。

總結一下，上次小弟主要是在可視化方面下了功夫，而此次是從乘客、監控和運維的角度去設計的功能。儘管不少功能只是點到爲止，但真要在實際項目中用起來，相信又是一個亮點工程了。

2016總結

看到今天sfgg有2016總結活動呢，那哥也來總結一把。

還得先說2015年，哥初來sfgg，斗膽發了幾篇文章，認識了很多朋友，也給了很多建議。2016年，項目進展順利，不少精力都投入在非技術領域，天然文章也寫的不勤快了。除了一篇3D機房的文章，後來就開始沾我小弟的光了。不過這也沒啥，江山代有小弟出，團隊就怕缺牛人。從技術走向管理的路，大多也是如此吧。

最後祝你們：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<body> 
<p>Happy New Year!</p> 
</body> 
</html>

索取代碼照舊：tw-service@servasoft.com