TWaver初学实战—基于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(){
        });
    }

站点三维展示

这个功能可谓是很赶时髦的，点击“展示”模块，跳出当前站点的三维展示图，重点标识了几个出口的位置。

电路展示

最后，点击“电路”模块，弹出站点内部电路图。如果对接上地铁的供配电系统，那还是这个展示平台上相当不错的一个亮点。

功能介绍到这里就基本结束了。

总结一下，上次小弟主要是在可视化方面下了功夫，而这次是从乘客、监控和运维的角度去设计的功能。尽管很多功能只是点到为止，但真要在实际项目中用起来，相信又是一个亮点工程了。