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

摘要

本发明公开了一种分层的网络拓扑可视化方法及系统，所述方法包含101）将浏览器画布分为背景层、链路层、节点层、拖动层和文本层，并根据数据类型在对应的层进行渲染；102）在各层中进行图形化元素渲染时，把拓扑数据中的背景、链路、节点和文字描述映射为浏览器的图形化元素，同时通过脚本语言为图形化元素注册相应的交互事件；所述各层的渲染具体为在链路层，根据链路源节点和端节点的相对位置，计算链路的起点和终点的位置，且映射链路对象为页面上的线元素，通过页面上的线元素划线函数渲染网络链路；在拖动层，通过拖放节点来改变拓扑元素的相对位置，当拖动对应的节点时，将在该层实现拖动元素和其相关联元素的重绘。

主权项

一种分层的网络拓扑可视化方法，所述方法包含：101)将浏览器画布分为：背景层、链路层、节点层、拖动层和文本层，并根据数据类型在对应的层进行渲染；102)在各层中进行图形化元素渲染时，把拓扑数据中的背景、链路、节点和文字描述映射为浏览器的图形化元素，同时通过脚本语言为图形化元素注册相应的交互事件；所述各层的渲染具体为：102‑1)在链路层，根据链路源节点和端节点的相对位置，计算链路的起点和终点的位置，且映射链路对象为页面上的线元素，通过页面上的线元素划线函数渲染网络链路；102‑2)在节点层，映射节点对象为页面上的图片元素，通过HTML5函数绘制节点；102‑3)在拖动层，通过拖放节点来改变拓扑元素的相对位置，当拖动对应的节点时，将在该层实现拖动元素和其相关联元素的重绘；102‑4)在文本层，当鼠标移动到节点和链路时，拓扑图中文字描述信息的显示，将通过新建文本层来进行渲染，在鼠标移开时，文本层将进行销毁；其中，所述各层都通过网元标识查找对应最新的拓扑数据进行渲染；浏览器通过HTML5WebSocket协议与服务器进行拓扑数据增量更新，数据传递采用JSON格式；所述步骤102‑1)进一步包含：11)浏览器完成JSON格式的拓扑数据解析，解析出链路层的链路数据，此数据以数组方式给出，数组中每一元素对应一条具体链路；同时解析出节点层的节点数据，此数据以数组方式给出，数组中每一元素对应一个具体节点；12)获取每一条链路数据，此数据包含链路的起点和终点，起点和终点数据中包含元素标识和元素位置信息；然后根据源节点和目的节点的元素标识，从拓扑数据的节点数据中查找出相应的节点的位置信息；13)依据步骤12)中获取链路的源节点和目的节点的位置信息，并根据节点相对位置判断，获得链路的源节点和目的节点的相对位置方向；14)依据步骤13)中获得的链路的源节点和目的节点的相对位置方向，计算链路的起点坐标source'{x:x1,y:y1}和终点坐标target'{x:x2,y:y2}，画出新建的链路；15)为链路注册mouseover和mouseout事件，并设置链路不可拖放；16)通过新建一个文本层来实现提示信息的显示；17)把新建的链路添加到链路层中，调用HTML5Canvas提供的Draw Line函数完成此链路显示；18)迭代处理链路数据，完成链路层的显示；所述步骤14)的网络链路渲染时起点和终点的连接点计算方法为：依据链路的起点和终点相对于画布容器的左上角的坐标把两节点的相对位置分成了左、右、上和下四种方向，具体为：依据这四种方向的不同，给出了这两个相对位置的节点之间链路的起点和终点位置；其中，起点和终点位置相关数据包括：左上角坐标(x,y)和节点的宽度width和高度height；针对左、右方向：如是左情况，链路对应的一端Node1的坐标(x,y)为：x＝Node1.x+Node1.width；y＝Node1.y/2，链路对应的另一端Node2的坐标(x,y)为：x＝Node2.x；y＝Node2.y/2；如是右情况，Node1的坐标(x,y)为：x＝Node1.x；y＝Node1.y/2，Node2的坐标(x,y)为：x＝Node2.x+Node2.width；y＝Node2.y/2；针对上、下方向：如是上情况，链路对应的一端Node1的坐标(x,y)为：x＝Node1.x+Node1.width/2；y＝Node1.y+Node1.height，链路对应的另一端Node2的坐标(x,y)：x＝Node2.x+Node1.width/2；y＝Node2.y；如是下情况，Node1的坐标(x,y)为：x＝Node1.x+Node1.width/2；y＝Node1.y，Node2的坐标(x,y)为：x＝Node2.x+Node2.width/2；y＝Node2.y+Node2.height。