[发明专利]一种分层的网络拓扑可视化方法及系统

说明书

技术领域

本发明涉及IT技术领域，特别涉及一种分层的网络拓扑可视化方法及系统。

背景技术

随着网络技术的发展和业务的增长，网络管理在网络配置发生变化时越来越难做到快速的呈现，而且在出现故障时查找根源也越来越复杂。网络拓扑的可视化把网络拓扑数据以一种直观、图形化的方式呈现给用户，是网络管理系统中比较重要的功能之一。可视化的网络拓扑把复杂的网络清晰的展示给用户，可以快速的查找网元和业务，并能迅速的定位故障源，帮助用户减轻运维负担，降低运维成本。

传统的网络可视化技术基于C/S（client/server）的方式来呈现网络拓扑。这种方式开发难度高，而且受制于必须有客户端。虽然也有使用SVG、VML等Web技术进行基于B/S（browser/server）方式的拓扑呈现，但这些是基于XML的声明式的绘图。这种方式并不能满足复杂绘图操作在性能上的需求，而且大多都需要浏览器安装插件，或存在浏览器端的兼容性问题。HTML5 canvas元素的出现填补了这种不足。随着HTML5标准的推进和浏览器厂商的支持，基于HTML5 canvas来进行Web绘图已经成为现实。开发人员可以使用JavaScript语言在canvas中进行一系列基于命令的图形绘制操作。基于HTML5 canvas的绘图在复杂绘图上操作能力强，性能高，而且大部分手机浏览器都支持HTML5 canvas，可以直接通过手机等移动设备进行访问。

中国第CN101719839A号专利公开了一种AJAX框架下基于VML语言的可视图形化资源配置方法，在这种方法中，通过采用微软IE浏览器的VML技术，结合AJAX的DWR框架来展示网络逻辑拓扑图。中国第CN101751383A号专利公开了一种使用SVG描述网络拓扑的方法，使用SVG的对象元素和LINE元素来表示拓扑图中的节点和连接关系，并通过JavaScript来控制动态呈现。中国第CN101777993A号专利公开了一种拓扑图构造方法和系统，所述方法以MVC架构为基础，以FLEX技术实现，将网络资源抽象为简单的对象即可以构造网络资源的拓扑图。

通过对现有技术和专利的分析，现有的公开技术或者以SVG、VML等基于DOM的方式来实现基于Web的拓扑图渲染，在动态表现能力以及性能上相对较差，或者基于Flash插件来实现，加载时间长，影响用户体验。而且，上述方法都不能对移动设备很好地支持。

发明内容

本发明目的在于，为克服现有技术的上述问题，本发明提供了一种分层的网络拓扑可视化方法及系统。

为实现上述目的，本发明提供了一种分层的网络拓扑可视化方法，所述方法包含：

101）将浏览器画布分为：背景层、链路层、节点层、拖动层和文本层，并根据数据类型在对应的层进行渲染；

102）在各层中进行图形化元素渲染时，把拓扑数据中的背景、链路、节点和文字描述映射为浏览器的图形化元素，同时通过脚本语言为图形化元素注册相应的交互事件；

所述各层的渲染具体为：

102-1）在链路层，根据链路源节点和端节点的相对位置，计算链路的起点和终点的位置，且映射链路对象为页面上的线元素，通过页面上的线元素划线函数渲染网络链路；

102-2）在节点层，映射节点对象为页面上的图片元素，通过HTML5函数绘制节点；

102-3）在拖动层，通过拖放节点来改变拓扑元素的相对位置，当拖动对应的节点时，将在该层实现拖动元素和其相关联元素的重绘；

102-4）在文本层，当鼠标移动到节点和链路时，拓扑图中文字描述信息的显示，将通过新建文本层来进行渲染，在文字描述信息消失后，文本层将进行销毁；

其中，所述各层都通过网元标识查找对应最新的拓扑数据进行渲染；浏览器通过HTML5 WebSocket协议与服务器进行拓扑数据增量更新，数据传递采用JSON格式。

上述步骤102-1）进一步包含：

11）浏览器完成JSON格式的拓扑数据解析，解析出链路层的链路数据，此数据以数组方式给出，数组中每一元素对应一条具体链路；同时解析出节点层的节点数据，此数据以数组方式给出，数组中每一元素对应一个具体节点；

12）获取每一条链路数据，此数据包含链路的起点和终点，起点和终点数据中包含元素标识和元素位置信息；然后根据源节点和目的节点的元素标识，从拓扑数据的节点数据中查找出相应的节点的位置信息；

13）依据步骤12）中获取链路的源节点和目的节点的位置信息，并根据节点相对位置判断，获得链路的源节点和目的节点的相对位置方向；