如何开发基于HTML5网络拓扑图应用

　　介绍

小编给大家分享一下如何开发基于HTML5网络拓扑图应用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

该例子展示了如何构建两个节点,一条连线,以及一个组的组合效果。可以容易理解构建一个拓扑界面基本上就是操作DataModel数据模型,以下为构建上图界面效果的模型代码部分:

//,init  data  modelhello =, new  ht.Node (); 　　hello.setPosition (60, 140,),,,,,,,,,,,,,, 　　hello.setName(& # 39;你好# 39;); 　　hello.setStyle(& # 39;注意# 39;,,& # 39;小姐:love  ht # 39;); 　　hello.setStyle (& # 39; note.background& # 39;,, & # 39; # FFA000& # 39;); 　　dataModel.add(你好); 　　 　　时间=world  new  ht.Node (); 　　world.setPosition (260,, 80); 　　world.setName (& # 39; & # 39;); 　　world.setStyle(& # 39;注意# 39;,,& # 39;HT  for  your 想象力# 39;); 　　world.setStyle (& # 39; note.expanded& # 39;,,假),,, 　　world.setStyle (& # 39; border.color& # 39;,, & # 39;红色# 39;),,,,,,,,,,,,,,,,, 　　dataModel.add(世界); 　　 　　时间=edge  new  ht.Edge(你好,,世界); 　　edge.setName (& # 39; Hello 世界\ nwww.hightopo.com& # 39;); 　　edge.setStyle (& # 39; label.color& # 39;,, & # 39;白色# 39;); 　　edge.setStyle (& # 39; label.background& # 39;,, & # 39; # 3498 db,),,,,,,,,,,,,,,,,, 　　dataModel.add(边缘),,, 　　 　　时间=group  new  ht.Group (); 　　group.setName (& # 39; HT  for  Web  & # 39;, +, ht.Default.getVersion ()); 　　group.addChild(你好); 　　group.addChild(世界); 　　group.addChild(边); 　　dataModel.add(集团),

当然真实的系统不会像上述代码这样写死内容,一般用户通过后台数据查询,然后再根据后台数据动态创建拓扑节点,连线,组,子网等图元内容,并填充如图元名字,连线颜色,告警内容等属性信息,而因为HT技术基于HTML5,因此大部分工业控制网SCADA客户都采用了WebSocket的实时通讯方式,关于WebSocket的使用可参考这篇文章:3 d拓扑自动布局之节点。js篇

构建模型就是上面这样简单,剩下工作就是设置相应的图元属性达到信息展示和美观的效果,关于图元甚至整体HT图形组件风格的自定义,可参考《HT Web风格手册》,这里我举个简单的小细节,可人有人留意到上面设置标签的代码有点特别:

edge.setName (& # 39; Hello 世界\ nwww.hightopo.com& # 39;);

这里\ n顾名思义就是换行的意思,当然除了换行外,还可以有垂直布局等等花哨的展示形态,可参考《网络拓扑图上文本的巧妙应用》一文的介绍:

如何开发基于HTML5网络拓扑图应用“> </p> <pre类=八?html;工具栏:假;”> var  list =,[],,节点;for  (var 小姐:=,0;,小姐:& lt;, 4,,我+ +),{ 　　,,,node =, new  ht.Node (); 　　,,,node.setImage(& # 39;站# 39;); 　　,,,node.p(100, +,小姐:*,100,,100); 　　,,,dm.add(节点); 　　 　　,,,list.push(节点); 　　} 　　时间=node 列表[0]; 　　node.s ({,,, 　　& # 39;标签# 39;:,& # 39;厦门& # 39;,,,,, 　　& # 39;label.font& # 39;:, & # 39; 22 px  arial,无衬线# 39;,,,,, 　　& # 39;label2& # 39;:, & # 39;厦门# 39;,,,,, 　　& # 39;label2.position& # 39;:, 31岁,,,,, 　　& # 39;label2.offset.y& # 39;:, 23}); 　　 　　时间=node 列表[1]; 　　node.s ({,,, 　　& # 39;标签# 39;:,& # 39;图\ n扑& # 39;,,,,, 　　& # 39;label.position& # 39;:,,,,,, 　　& # 39;label.font& # 39;:, & # 39; 22 px  arial,无衬线# 39;,,,,, 　　& # 39;label2& # 39;:, & # 39; Hightopo& # 39;,,,,, 　　& # 39;label2.position& # 39;:,,,,,, 　　& # 39;label2.offset.x& # 39;:,,,,,, 　　& # 39;label2.rotation& # 39;:, -Math.PI /, 2}); 　　 　　时间=node 列表[2]; 　　node.s ({,,, 　　& # 39;标签# 39;:,& # 39;上\ n海& # 39;,,,, 　　& # 39;label.position& # 39;:,,,,,, 　　& # 39;label.font& # 39;:, & # 39; 22 px  arial,无衬线# 39;,,,,, 　　& # 39;label2& # 39;:, & # 39;上海,,,,,, 　　& # 39;label2.position& # 39;:,,,,,, 　　& # 39;label2.offset.x& # 39;:,,,,,, 　　& # 39;label2.rotation& # 39;:, -Math.PI /, 2}); 　　 　　时间=node 列表[3]; 　　node.s ({,,, 　　& # 39;标签# 39;:,& # 39;北京& # 39;,,,,, 　　& # 39;label.position& # 39;:,,,,,, 　　& # 39;label.font& # 39;:, & # 39; 22 px  arial,无衬线# 39;,,,,, 　　& # 39;label2& # 39;:, & # 39;北京# 39;,,,,, 　　& # 39;label2.position& # 39;:,,,,,, 　　null<h2 class=如何开发基于HTML5网络拓扑图应用