一种大数据量拓扑绘制方法及设备与流程

1.本发明涉及计算机软件技术领域，具体涉及一种大数据量拓扑绘制方法及设备。


背景技术：

2.随着互联网技术的不断发展，模块化/组件化成为当前提高前端开发效率、降低web页面维护成本的首选开发模式。当前，前端开发中使用的拓扑组件，是采用html5canvas技术。随着web网管和增值应用在工程上的应用日益成熟，工程和集采中也使用拓扑组件，但在使用场景中常出现5000至10000的图元绘制(性能要求为2s内绘制渲染10000节点)，导致现有技术下的拓扑组件的性能无法满足客户的要求(绘制10000拓扑节点需要4-6s左右)。
3.一方面，相关技术中使用第三方库中性能最好的第三方库qunee，但成本开销大且性能提升有限(绘制10000拓扑节点时需要4s左右)。而且第三方库难以满足对于拓扑功能的拓展需求，如自定义菜单，工具栏等。
4.另一方面，采用虚拟dom和分层画布解决，可以通过操作虚拟dom，减少dom的重绘从而提升性能，但是当数据量过大，依旧会有性能问题。


技术实现要素：

5.本发明实施例提供一种大数据量拓扑绘制方法及设备，通过优化自研拓扑组件性能提高大数据量拓扑绘制的效率。
6.本发明实施例提供了一种大数据量拓扑绘制方法，其特征在于，其包括步骤：
7.根据所有待绘制图元的真实坐标计算视口范围并结合屏幕大小生成当前视口可见区域；
8.在进行图元绘制时，根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，且对符合过滤条件的图元不进行绘制。
9.一些实施例中，所述根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
10.将图元的真实坐标转换成屏幕坐标后，根据图元的屏幕坐标判断图元是否在所述当前视口可见区域内，若否，则判定为符合过滤条件。
11.一些实施例中，所述将图元的真实坐标转换成屏幕坐标，包括步骤：
12.根据第一公式将所述图元的真实坐标转换成屏幕坐标，所述第一公式为：
13.x＝(x-left-ox)*scale，
14.y＝(y-top-oy)*scale，
15.其中，(x，y)表示转换后的屏幕坐标，(x，y)表示图元的真实坐标,left表示图层左移的距离，top表示图层上移的距离，(ox，oy)表示缓存画布原点o的坐标，scale表示拓扑图缩放值。
16.一些实施例中，所述根据图元的真实坐标与当前视口可见区域之间的关系和/或
图元间的层级关系判断是否符合过滤条件，包括步骤：
17.获取图元的父级节点信息，所述父级节点信息包括图元的父级节点id；
18.根据所述父级节点信息判断所述图元的父级节点是否属于或等于可见节点集，若否，则判定为符合过滤条件，且所述可见节点集为用户当前查看的节点集。
19.一些实施例中，所述父级节点信息包括图元的父级节点的折叠情况；
20.所述根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
21.根据所述父级节点信息判断图元的父级节点是否存在折叠，若是，则判定为符合过滤条件。
22.一些实施例中，绘制连线或线组时，所述根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
23.确认任一所述连线或线组的端点均存在且不同；
24.将一个所述连线的两端点的真实坐标转换成屏幕坐标后，根据所述两端点的屏幕坐标判断所述两端点是否均在所述当前视口可见区域内，若否，则判定为符合过滤条件。
25.一些实施例中，绘制连线或线组时，所述根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
26.循环获取所述两端点的父级节点信息并根据所述父级节点信息判断所述父级节点是否属于或等于可见节点集，若否，则判定为符合过滤条件。
27.一些实施例中，绘制连线或线组时，所述根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
28.根据所述父级节点信息判断所述两端点的父级节点是否存在折叠，若是，则判定为符合过滤条件。
29.一些实施例中，绘制连线或线组时，所述根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
30.判断所述连线所属线组是否折叠，若是，则判定为符合过滤条件。
31.另一方面，本发明实施例提供了一种设备，其特征在于，所述设备包括：至少一个处理器；以及与所述至少一个处理器耦合的存储器，所述存储器包含有存储于其中的指令，所述指令在被所述处理器加载并执行，以实现如权利要求1-9中任一项所述的方法。
32.本发明提供的技术方案带来的有益效果包括：
33.本发明实施例提供一种大数据量拓扑绘制方法，利用图元的层级关系及真实坐标与当前视口可见区域的关系，在ui绘制层实现算法过滤，减少了图元的绘制数量，提升产品性能。
附图说明
34.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
35.图1为本发明实施例提供的一种大数据量拓扑绘制方法流程示意图；
36.图2为本发明实施例提供的图元绘制过程示意图；
37.图3为本发明实施例提供的连线或线组绘制过程示意图。
具体实施方式
38.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
39.如图1所示，本发明实施例提供了一种大数据量拓扑绘制方法，其包括步骤：
40.s100:根据所有待绘制图元的真实坐标计算视口范围并结合屏幕大小生成当前视口可见区域；
41.s200:在进行图元绘制时，根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，且对符合过滤条件的图元不进行绘制。
42.需要说明的是，s100中的视口范围指当前所有图元的坐标生成的最大的数据范围；如作为根视口的湖北，其范围内可包括武汉、荆州、宜昌等子节点集。当前视口可见区域是指根据屏幕大小生成的可见数据范围，可能是1366*768。图元在数据库中为真实点坐标，但是在屏幕中呈现时，绘制的全量数据根据真实坐标会有很大的数据范围，也即隐藏的视口，而屏幕显示的内容是有限的，当前待绘制图元在屏幕可显示的区域则为当前视口可见区域。
43.对于s200中的层级关系，其包括节点(或节点集)与其父级节点(或节点集)的关系，具体地：图元可以是一个节点也可以是一个节点集，一个节点集内包含属于该节点集的所有子节点和/或子节点集。图元的父级节点为该图元(节点或节点集)所属的节点集，例如，若以湖北区域为一个节点集a，则节点集a内包含了子节点集b(武汉)、子节点集c(荆门)等图元，子节点集b(武汉)内又包括子节点集d(汉阳)等图元，则节点集a为节点集b和c的父级节点。当用户点击进入武汉区域内时，则拓扑图仅显示武汉区域内的图元，每个图元都有所属节点集(即父级)的id。此外，节点与节点集可根据具体业务需求进行划分。但本发明实施例涉及的节点层级关系(用于进行过滤条件判断的)不包括两个图元在拓扑图上绘制顺序上的层级关系(先后关系)。
44.可以理解的是，在进行大数据量拓扑绘制方法的实现过程中，可涉及到多个模块以及模块之间的相互协同运作。例如，包括内初始化模块、组件add模块、组件draw模块、图元绘制模块、视口与坐标系转换模块、事件管理模块，其中，初始化模块与组件add模块用于绘制前的数据处理，如资源加载，线组关系的生成，事件绑定等，在处理完成后根据场景需要使用map结构进行缓存，在图元绘制时可高效获取；事件管理模块为通过事件工厂对于浏览器鼠标等事件进行注册管理，针对不同事件进行分发响应；组件draw模块为事件触发需要重绘的处理逻辑，在移动视图或者节点拖动时会触发，其用于处理线组分合及视口与画布的关系；图元绘制模块用于根据其他模块处理完成后的数据，进行本发明实施例提供的一种大数据量拓扑绘制方法，对待绘制图元进行过滤，针对不符合绘制条件的图元不绘制，从而达到减少绘制数据，提升绘制性能的目的。
45.本发明实施例利用图元的层级关系及真实坐标与当前视口可见区域的关系，在ui
绘制层实现算法过滤，减少了图元的绘制数量，提升产品性能。
46.一些实施例中，s200中根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
47.s210:将图元的真实坐标转换成屏幕坐标后，根据图元的屏幕坐标判断图元是否在所述当前视口可见区域内，若否，则判定为符合过滤条件。
48.本实施例在图元绘制时，针对判定为不在当前可见区域的图元，将不进行绘制。
49.一些实施例中，s210中将图元的真实坐标转换成屏幕坐标，包括步骤：
50.根据第一公式将所述图元的真实坐标转换成屏幕坐标，所述第一公式为：
51.x＝(x-left-ox)*scale，
52.y＝(y-top-oy)*scale，
53.其中，(x，y)表示转换后的屏幕坐标，(x，y)表示图元的真实坐标,left表示图层左移的距离，top表示图层上移的距离，(ox，oy)表示缓存画布原点o的坐标，scale表示拓扑图缩放值，其范围可选在0.5到2之间，可默认设为1。
54.一些实施例中，s200中根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
55.s220:获取图元的父级节点信息，所述父级节点信息包括图元的父级节点id；
56.s221:根据所述父级节点信息判断所述图元的父级节点是否属于或等于可见节点集，若否，则判定为符合过滤条件，且所述可见节点集为用户当前查看的节点集。
57.需要说明的是，可见节点集指当前用户查看的节点集，如整个数据范围是湖北，湖北是一个节点集，里面包含武汉，荆门等节点集，用户当前查看的是荆门及其下的图元信息，荆门则为可见节点集，武汉，黄石则是不可见节点集。
58.本实施例中，若图元的父级节点不在可见节点集，则该图元的父级节点不是当前用户查看的节点集，在绘制时，放弃对该图元的绘制。
59.可优选地，父级节点信息还包括图元的父级节点的折叠情况；s200中根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
60.s230:根据所述父级节点信息判断图元的父级节点是否存在折叠，若是，则判定为符合过滤条件。
61.需要说明的是，所述折叠情况分为折叠和不折叠(即展开)，如当前显示湖北省地图，若仅看到武汉，黄石，荆州等节点集但看不到其分别还包含了哪些具体信息(如武汉下面可能还有汉阳、武昌等信息为不可见)，则此时的武汉、黄石、荆州全部为折叠状态。而在展开状态下，则可以看到武汉，黄石，荆州，以及各自下属的节点集，如荆州下属的钟祥、沙洋、京山等。
62.本发明实施例中，若图元的父级节点被判定为折叠状态，则不绘制该图元。
63.如图2所示，在一个具体的实施例中，针对图元节点进行绘制时，首先判断该节点屏幕坐标是否属于当前视口可见区域，若否则不绘制该节点，若属于当前视口可见区域则进一步判断该节点是否为根视口，若不是根视口，则进一步获取该节点的父级节点信息，并判断父级节点是否属于或等于可见节点集，若否，则不绘制该节点，若是则进一步判断父级节点是否存在折叠，若存在则不绘制该节点，若不存在折叠则绘制该节点。若是根视口，而
根视口包含所有节点，则不需要判断该节点是否属于当前视口了，只用判断节点的父级是否折叠。可以理解的是，在判断父级节点是否满足过滤条件时，是循环向上查找父级节点(或节点集)直至遍历所有父级节点(节点集)。
64.一些实施例中，绘制连线或线组时，s200中根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，包括步骤：
65.s201:确认任一所述连线或线组的端点均存在且不同；
66.s202:将一个所述连线的两端点的真实坐标转换成屏幕坐标后，根据所述两端点的屏幕坐标判断所述两端点是否均在所述当前视口可见区域内，若否，则判定为符合过滤条件。
67.举例说明，若武汉-洪山区内部包含两个节点光谷a和软件园b，且光谷a和软件园b之间有一根连线l1，则连线l1的两端点为光谷a，软件园b，它们分别存在唯一标识id；进一步地，若软件园a内a栋与b栋之间有一根连线l2，当软件园a为折叠时，连线l2的两端点都是软件园。
68.可以理解的是，s201中确认任一所述连线或线组的端点均存在且不同，是指在进行连线绘制时，需要首先确认该连线的两个端点都存在且是不同的端点，若否，则直接过滤掉该连线，不进行绘制。
69.进一步地，绘制连线或线组时，循环获取所述两端点的父级节点信息并根据所述父级节点信息判断所述父级节点是否属于或等于可见节点集，若否，则判定为符合过滤条件。
70.可以理解的是，本实施例中，当两端点中任一个或两个的父级节点不在可见节点集时，则不绘制该连线或线组。
71.进一步地，绘制连线或线组时，根据所述父级节点信息判断所述两端点的父级节点是否存在折叠，若是，则判定为符合过滤条件。
72.举例说明：若此时屏幕绘制的是武汉洪山区，洪山区包含光谷、软件园等节点集，软件园内有a栋，b栋，c栋等节点，a栋与b栋之间有一根连线，但此时软件园为折叠状态，从拓扑中看不到软件园内的图元情况，此时，连线的两端点所在的父级为软件园是折叠的状态，此时连线也不绘制。
73.进一步地，绘制连线或线组时，判断所述连线所属线组是否折叠，若是，则判定为符合过滤条件。
74.举例说明：若此时屏幕绘制的是武汉洪山区，洪山区包含，光谷，软件园等，软件园内有a栋，b栋，c栋等，a栋与b栋之间有三根连线，由于三根连线的起点一样，终点也一样(可根据起点和终点的id进行判断)，则会形成一个线组，线组也会有展开折叠状态，当线组展开时，用户看到的是a栋与b栋之间有三根连线，当线组折叠时，显示的是a栋与b栋之间的一个线组(屏幕上呈现的也是连线，只不过有一个”+”和“3”，表示里面有三根连线，可点击展开)。线组折叠、展开来自于数据库中连线的状态以及连线上展开折叠状态，当形成线组的连线均为折叠时，则线组为折叠。
75.本发明实施例中，当连线所属线组判断为折叠时，则不绘制该连线。
76.如图3所示，在一个具体的实施例中，针对连线或线组进行绘制时，首先判断该连线两端点是否均存在且不同，若否，则不绘制；若两端点均存在且不同，则进一步判断两端
点是否均在当前视口可见区域内，若否，则不绘制；若均在当前视口可见区域内，则进一步判断两端点的父级节点是否均属于或等于可见节点集，若否，则不绘制；若都属于或等于可见节点集则进一步判断两端点的父级节点是否存在折叠，若是则不绘制，若否，则对存在线组的连线进一步判断是否线组存在折叠，若是则不绘制该连线，若否，则开始绘制连线。可以理解的是，若连线不存在线组，则判断其端点的父级节点不存在折叠后可进入绘制。
77.在一个具体的实施例中，进行大数据量拓扑绘制时，包括步骤：
78.s1、产品侧在使用组件进行图元绘制之前，初始化模块会对组件进行内部初始化，初始化默认样式，画布及浏览器订阅事件，仅执行一次。
79.s2、组件add模块将待绘制拓扑数据，通过一次或多次add动作加入到一个全量数据池内，生成新的线组关系，所有图元添加监听事件，生成节点层级关系，并设置资源样式，包含图片和样式处理，由于图片加载是异步的，需要等所有资源加载完成通知绘制，仅在产品侧调用时才会触发。
80.s3、组件draw模块根据连线及线组的情况，设置线组的动态分合关系。并根据数据源(待绘制图元)计算视口范围，设置缓存画布的宽高及滚动条的样式，以便用于绘制时的真实坐标转换成屏幕坐标。此步骤在用户操作视口或者节点时均会触发。
81.需要说明的是，计算视口范围时，可先判断当前绘制的是根视口(即包含所有数据源，若使用方需要绘制湖北区域，则湖北区域对应的所有图元数据所对应的视口)，还是具体的某个子节点集(如武汉)；若是子节点集，则只使用该子节点集内的节点获取节点边界点，x最大，x最小，y最大，y最小的节点，从而形成一个视口范围(其中x,y分别为边界点节点或节点集的真实坐标)，若为根视口，则使用根视口全量数据(如湖北区域)的所有节点计算视口范围。
82.s4、图元绘制模块用于根据已处理完成的数据调用canvas实现图元绘制，并在绘制时进行过滤判断，只绘制满足条件的图元。具体地：根据图元的真实坐标与当前视口可见区域之间的关系和/或图元间的层级关系判断是否符合过滤条件，且对符合过滤条件的图元不进行绘制。
83.需要说明的是，可采用mvvm(model-view-viewmodel)将数据处理、图元绘制以及事件交互进行分离，其中model层为数据处理层，viewmodel为图元绘制逻辑，在绘制数据处理结束后(如点线颜色设置，图片资源加载等)，可根据图元类型直接调用viewmodel中的ui绘制逻辑，在canvas上绘制图元，结合mvvm模式，可以在数据处理和图元绘制使得组件各模块之间更加独立、高效。
84.s5、视口与坐标系转换模块将当前待绘制图元的真实坐标实时转换成屏幕坐标，具体的，可使视口的左上角初始坐标为(0,0)，即left、top的初始值均为0，通过移动视口改变left、top的值，可通过第一公式进行坐标转换，第一公式为：
85.x＝(x-left-ox)*scale，
86.y＝(y-top-oy)*scale，
87.其中，(x，y)表示转换后的屏幕坐标，(x，y)表示图元的真实坐标,left表示图层左移的距离，top表示图层上移的距离，(ox，oy)表示缓存画布原点o的坐标，scale表示拓扑图缩放值，其范围可选在0.5到2之间，可默认设为1。
88.需要说明的是，视口包含视口层级信息，宽高，视口原点及视口坐标信息。视口层
级信息为当前视口所在节点集信息，视口原点为缓存画布的左上角坐标点，视口坐标信息为某一个节点集的坐标信息，即当视口与节点集相关联时，如根视口或某个节点集，此时视口的坐标即为这个节点集的坐标，同时视口数据范围是根据所有图元坐标生成的数据范围；left、top为视口偏移量，即用户直接拖拽整个屏幕拖动后的偏移量；视口的数据范围、视口与屏幕的关系是在步骤s3中计算得到的，而left、top可能是用户操作(如拖拽拓扑屏幕)后计算生成的。
89.可以理解的是，假设用户拖动了整个拓扑图，此时图元的真实坐标不会变化，但是屏幕中的节点位置变了，即用户操作(移动收口即移动拓扑图，缩放拓扑图等)不改变节点真实坐标。
90.可以理解的是s5中视口与坐标系转换模块与s4中图元绘制模块是协同运作的，在进行图元绘制时，传入节点坐标，调用s5中坐标转换方法，转成屏幕坐标进行绘制。且每个组件都有自己的坐标系，真实坐标转换的屏幕坐标可能存在不同。
91.s6、事件管理模块在各画布、window上订阅鼠标及浏览器事件。采用事件工厂进行事件响应行为注册和分发，当鼠标触发事件时事件服务传入事件对象，事件工厂根据事件对象、鼠标及键盘组合获取对应的事件响应行为返回给事件服务。由事件服务进行方法调用响应用户操作。响应行为通过事件工厂进行分发管理，以实现事件高效响应，同时提升事件处理效率。如alt键+鼠标按下左键+鼠标移动，事件工厂判断为视口移动，返回视口移动响应行为，当进行move操作时，事件服务则会调用移动事件响应行为的move方法，触发draw响应用户的操作达到重绘图元的效果。
92.可以理解的是，通过采用事件工厂进行事件响应行为注册和分发，当用户操作鼠标时，事件服务可以在事件工厂中快速找到对应的事件对象，从而调用对应的方法去更新model，这种设计模式，可以在事情触发时高效计算出需要响应的事件，且在开发过程中逻辑也会更加清晰，便于维护。
93.本发明实施例的有益效果包括：
94.利用图元的层级关系及真实坐标与当前视口可见区域的关系，在ui绘制层实现算法过滤，减少了图元的绘制数量，提升产品性能。此外，采用了mvvm模式，对数据处理、ui呈现和事件交互做了分离，提供了灵活的可扩展性，保证了操作和查询的效率；在操作节点和控制视图上可以实现更高效的算法逻辑。
95.另一方面，本发明实施例还提供一种设备，该设备包括：至少一个处理器；以及与所述至少一个处理器耦合的存储器，所述存储器包含有存储于其中的指令，所述指令在被所述处理器加载并执行，以实现如任一方法实施例中所述的方法。
96.本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读存储介质上，计算机可读存储介质可以包括计算机可读存储介质(或非暂时性介质)和通信介质(或暂时性介质)。
97.需要说明的是，在本发明中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
98.以上所述仅是本发明的具体实施方式，使本领域技术人员能够理解或实现本发明。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。