前言

最近特别忙，承蒙大伙关照，3D机房的项目一个接着一个，领了一帮小弟，搞搞传帮带，乌飞兔走，转眼已经菊黄蟹肥……有个小弟很不错，勤奋好学，很快就把API都摸透了，自己折腾着做了个HTML5的魔都的地铁线路图，能拖能拽的，还和电子地图做了交互。哥决定把小弟的成果纳入“HTML5大数据可视化效果”系列，以示鼓励（P.S. 其实还挺有压力的，后浪推前浪，新人赶旧人。我们这些老鸟也得注意，免得让00后给抢了饭碗）

效果图对比

网上的地铁图还是很多的，小弟选了这张比较新的做参考。想当年哥来魔都打拼时，图上可就一红一绿打个叉……暴露年龄的话不多说，看图：

再来看看小弟做的：

我是一眼看不出区别，但这可不是一张效果图，而是一个新手仅用了几天做出来的东西，而且里面许多美化和调整是通过程序自动完成的，这就不容易了。更重要的是，它并不是一张死图，而是纯矢量、可交互、有动态效果、无失真缩放的拓扑图！我们先简单看一下交互效果，后面可以详细说说代码的实现。

文本提示弹弹弹

首先，把鼠标移到站点、路段、图标等位置，都会有文本提示弹出，这个比较基本，百度家的就有，小弟也就放了比较简单的弹出内容。如果加上基本介绍啊、相关提示啊、周边信息啊……要是加上广告，就可以赚钱了……反正什么都可以加嘛，就是一个setToolTip命令而已。

站点图标变变变

当鼠标移到站点上时，站点图标做了放大效果，这个效果很贴心，看了下百度家，用的是发光效果。

实现的方法也很简便，就是在注册站点矢量图形时，加入了动态判断。以下注册普通站点矢量图形的代码：

twaver.Util.registerImage('station',{ w: linkWidth*1.6, h: linkWidth*1.6, v: function (data, view) { var result = []; if(data.getClient('focus')){ result.push({ shape: 'circle', r: linkWidth*0.7, lineColor: data.getClient('lineColor'), lineWidth: linkWidth*0.2, fill: 'white', }); result.push({ shape: 'circle', r: linkWidth*0.2, fill: data.getClient('lineColor'), }); }else{ result.push({ shape: 'circle', r: linkWidth*0.6, lineColor: data.getClient('lineColor'), lineWidth: linkWidth*0.2, fill: 'white', }); } return result; } });

动画效果拽拽拽

从上图还可以看到，在换乘站图标中，除了增加了颜色，还实现了旋转效果。这个就秒杀百度家了。 来看代码：

1. twaver.Util.registerImage('rotateArrow', { 2. w: 124, 3. h: 124, 4. v: [{ 5. shape: 'vector', 6. name: 'doubleArrow', 7. rotate: 360, 8. animate: [{ 9. attr: 'rotate', 10. to: 0, 11. dur: 2000, 12. reverse: false, 13. repeat: Number.POSITIVE_INFINITY 14. }] 15. }] 16. });

当然这对于TWaver来说也很容易，只不过对rotate属性进行了动态改变而已。 另外，在单击和双击站点时，还实现了selected和loading的动画效果，值得点赞！

混合缩放炫炫炫

无失真缩放是矢量图的先天优势，小弟也掌握得炉火纯青，把TWaver的混合缩放模式用到极致，还有缩放比例控制、文字自动隐藏等小功能，方便订制。

代码也不复杂：