上海先进网站建设公司,最新新闻热点事件2022,外链平台,网上做电商怎么做电信网结构#xff08;telecommunication network structure#xff09;是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式。组合逻辑描述网路功能的体系结构#xff0c;配置形式描述网路单元的邻接关系#xff0c;即以交换中心#xff08;或节…电信网结构telecommunication network structure是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式。组合逻辑描述网路功能的体系结构配置形式描述网路单元的邻接关系即以交换中心或节点和传输链路所组成的拓扑结构。常见的网络拓扑结构有星型结构、总线结构、环形结构、树形结构、网状结构、混合型拓扑以及蜂窝拓扑结构等本文的例子主要描绘的是总线型拓扑在显示上相对其他的结构类型来说更清晰明了绘制起来也非常容易。 虽然题目起的名字是电信网络拓扑图几乎所有的拓扑图都能涵盖例如基本网络图网络拓扑图机架图网络通信图3D网络图等等。 效果图如下 这个图看起来挺简单的代码也少但是内容不少。 首先机柜01、机柜02、机柜03 都是 ht.Group “组”类型ht.Group 类型用于作为父容器包含孩子图元在 GraphView 拓扑图http://www.hightopo.com上可通过双击进行展开合并合并时会自定隐藏子孙图元节点 如果有子节点有连线连接到外部时合并的 Group 将代理进行连接。Group 的移动会带动孩子节点跟随 孩子的位置和大小变化也会影响 Group 的展开图形和 position 位置。 这边提到一个代理连线的问题“代理”两个字可以很好地表明代理连线意义。实际上就是如果组内部的节点与组外部的节点有连线那么在组合并的时候会在这个组会“代理”与外部节点之间的连线这个就是代理连线。我们拿机柜02来说吧机柜02内部有一个“电脑”与“内部网络交换机”之间有两条连线那么当我们双击机柜02合并时实际上就相当于机柜02与“内部网络交换机”之间有两条连线了。 那么我们来看看如何绘制这个组以及组内部的节点吧先创建“机柜02”的 Group 节点因为整个例子我创建了三个 Group 节点而且创建的方式都类似因此把创建组的代码封装起来复用 function createGroup(name, x, y) {var group new ht.Group();//组类型 实际上也是一个节点group.setExpanded(true);//设置展开组group.setName(name);//设置组的名字group.s({//设置组的样式stylegroup.title.background: rgba(14,36,117,0.80),//组展开后的title背景颜色仅对group.type为空的类型起作用group.background: rgba(14,36,117,0.40),//组展开后的背景颜色group.title.align: center//组展开后的title文字水平对齐方式默认值为left可设置为center和right});group.setPosition(x, y);//设置组的位置group.setImage(images/服务器.json);//设置拓扑上展现的图片信息在GraphView拓扑图中图片一般以position为中心绘制dataModel.add(group);//将创建的组节点添加进数据容器中return group; } 组是可以通过双击展开合并的展开的时候显示的是一个有标题栏的框当然这些都是可以自定义的合并的时候就显示上面代码中设置的 group.setImage 中的图片。 所有机柜内部的节点都是 ht.Node 类型的节点所以我也封装了一下 function createNode(image, parent, x, y) {var node new ht.Node();//创建一个 Node 节点if (image) node.setImage(image);//设置节点的显示图片if (parent) node.setParent(parent);//设置节点的父亲if (x y) node.setPosition(x, y);//设置节点的位置dataModel.add(node);//将节点添加进数据容器中return node; } 生成机柜02 cabinet createGroup(机柜02, 146, 445);//创建机柜02 createNode(images/正常.json, cabinet, 78, 440).s(label, 数据监控分析系统);//创建带有“正常”图片的节点并设置这个节点的文字为“数据监控分析系统” 因为连线需要的是“源节点”以及“终节点”这边源节点是中间的“内部网络交换机”我们再创建这个节点 var line createNode();//创建一个节点 line.setSize(725, 20);//设置节点大小 line.setPosition(310, 325);//设置节点位置 line.s({//设置节点的style属性shape: roundRect,//决定shape的形状默认值为空代表用image绘制。roundRect四周圆角矩形shape.background: rgba(14,36,117,0.80),//背景填充颜色为null代表不填充背景shape.border.color: #979797,//边框颜色shape.corner.radius: 10,//该参数指定roundRect类型的圆角半径默认为空系统自动调节可设置正数值label: 内部网络交换机, //文字内容默认为空label.position: 45,//文字内容默认为空label.offset.x: 50,//文字水平偏移对于Edge意味着沿着连线方向水平偏移label2: 内部网络交换机,//HT默认除了label.*的属性外还提供了label2.*的属性用于满足一个图元需要显示双文字的情况label2.position: 48,label2.offset.x: 50,label2.offset.y: 2, }); 不知道你们有没有注意到有一个 label2 的样式属性这个是 HT 为了能在一个节点上添加两个 label 文本而增加的功能label 属性和 label2 的属性是完全相同的只要在设置属性的时候用 label 和 label2 区分开来就可以。 源节点和终节点都具备了可以制作连线了 createEdge(line, createNode(images/电脑.json, cabinet, 185, 450), rgb(30,232,178), -100, true); //参数1 源节点参数2 终节点参数3 连线颜色参数4 连线起始点的水平偏移参数5 是否创建两条连线 还有一点有趣的“交换机”的部分最左侧蓝色方形的节点和中间长条的节点并不是一体的而是分离的但是我通过 setHost 进行节点与节点间的吸附然后反吸附回来这样操作上就相当于这两个节点是一体的 var exchange createNode(images/交换机.json, null, -53, 313); exchange.setHost(line);//设置吸附 line.setHost(exchange);//反吸附 又设置line的吸附为exchange 因为 HT 会按照节点添加进数据容器中的顺序来进行层次的排列我的交换机是在 line 的添加之后的所以默认交换机的节点会显示在 line 之下我们将默认的层级显示关闭并设置交换机 exchange 显示在数据容器的顶部 dataModel.setAutoAdjustIndex(false);//将自动调整data在容器中索引顺序的开关关闭 dataModel.sendToTop(exchange);//将data在拓扑上置顶  代码就是这些还有不懂的可以留言或者私信我也可以大家一起探讨。转载于:https://www.cnblogs.com/xhload3d/p/8377854.html