使用3D呈现拓扑的多层次结构

2024-02-10 05:58

本文主要是介绍使用3D呈现拓扑的多层次结构,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

关于3D场景在现在网管中的应用的讨论一直没有停止过,应用场景有哪些,应用的意义有哪些,可以为产品开发、为系统使用带来多少利益点等等。今天给大家介绍一种应用情景,希望能借此机会,抛砖引玉,引出更多更具有实际意义的应用需求来,为大家应用系统的丰富性添砖加瓦。
在TWaver传统的2D应用中,近一年非常突出地出现了一种需求,那就是希望能够在同一个页面内显示多种层次的网络结构,这样做的好处在于:在同一个页面中可以清晰地描述一个网络从逻辑到物理上的结构,与此同时,如果做跨层次的交互的时候(例如说更改子网内外节点的连接关系),就不需要采用钻取/回退(drill down/up)或者群组合并/收缩等的复杂操作了。

TWaver过去提供了使用2D技术拼凑上述需求页面的示例代码,效果已经相当不错了,但是客户的需求也是随着技术的发展而不断水涨船高,对原来的方案提出了不足之处:一方面立体感不够,场景不具有三维交互;另一方面,如果层次多,铺展较为分散的时候,拼接这样的图纸较为麻烦。
层次,意味着在平面坐标之余,多出一维数据用来描述节点关系,常用的描述方式则是节点纵向位置的不同(高中低的位置偏差)。仔细一想,这不正是3D场景中,高程数据的一个用武之地吗,Z轴坐标不是恰恰可以描述出高中低位置的差异,不也就正好能凸显节点间的层次吗?ok,马上试试看:
首先组织子网数据,同一个子网的数据我们认为它们处于同一层次,固然也就是具有相同的z坐标。

private function createGroup1():void{var box:ElementBox = network.elementBox;var bus:Node = NodeUtils.buildBus(new Vector3D(startx,ly,b1z),new Vector3D(b1xr,ly,b1z),12,0xa0a0a0);box.add(bus);box.add(NodeUtils.buildNodeWithCommon(gpg(0,0,0),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(2,0,0),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(4,0,0),serverSize,s3,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(0,0,0),serverSize,s2,null,null,null,"s"));box.add(NodeUtils.buildLink([gpg(0,ly,0),gpg(0,ly,8)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(2,ly,0),gpg(2,ly,8)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(4,ly,0),gpg(4,ly,8)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(2,ly,8),gpg(2,ly,10),gpg(8,ly,10)],8,0x20AA20));box.add(NodeUtils.buildNodeWithCommon(gpg(8,0,10),srSize,csr,null,null,null,"s"));box.add(NodeUtils.buildBus(gpg(4,ly,14),gpg(8,ly,14),12,0xa0a0a0));box.add(NodeUtils.buildNodeWithCommon(gpg(5,0,17),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(7,sy,17),smallSize,s1,null,null,null,"s"));box.add(NodeUtils.buildLink([gpg(5,ly,17),gpg(5,ly,14)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(7,ly,17),gpg(7,ly,14)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(6,ly,14),gpg(6,ly,12),gpg(8,ly,12),gpg(8,ly,10)],8,0x20AA20));box.add(NodeUtils.buildBus(gpg(8,ly,10),gpg(10,ly,10),10,0x00a0a0));box.add(NodeUtils.buildBus(gpg(10,ly,8),gpg(10,ly,12),12,0xa0a0a0));box.add(NodeUtils.buildLink([gpg(10,ly,9),gpg(13,ly,9)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(10,ly,11),gpg(13,ly,11)],3,0x00AAA0));box.add(NodeUtils.buildNodeWithCommon(gpg(13,sy,9),smallSize,s2,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(13,sy,11),smallSize,s2,null,null,null,"s"));box.add(NodeUtils.buildLink([gpg(13,ly,9),gpg(12,ly,5)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(13,ly,9),gpg(16,ly,9)],3,0x00AAA0));box.add(NodeUtils.buildNodeWithCommon(gpg(12,0,5),serverSize,s3,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(16,0,9),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildBillboard(gpg(22,ly,9),"cloud"));box.add(NodeUtils.buildLink([gpg(16,ly,9),gpg(22,ly,9)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(18,ly,11)],3,0xAA00A0));box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(17,ly,17)],3,0xAA00A0));box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(15,ly,19)],3,0xAA00A0));box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(10,ly,19)],3,0xAA00A0));box.add(NodeUtils.buildNodeWithCommon(gpg(18,sy,11),smallSize,s3,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(17,sy,17),smallSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(15,sy,19),smallSize,s2,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(10,sy,19),smallSize,s2,null,null,null,"s"));var plane:Node = NodeUtils.buildPlane(new Vector3D(0,-42,0),new Vector3D(1000,1000,1000),0xE0E0E0,"floor");box.add(plane);plane.setStyle(Style3D.ZORDERING_LAYER,-100);box.add(NodeUtils.createText(new Vector3D(0,-35,-400),"Group A",0xFFA0A0));}

 


我们再创造另外一个层次的子网内数据,为了与第一个子网分出层次的不同,我们把这个层次的子网内对象设置上和上个子网内对象不同的z坐标。

private function createGroup2():void{var box:ElementBox = network.elementBox;var bus:Node = NodeUtils.buildBus(new Vector3D(startx,ly,b1z),new Vector3D(b1xr,ly,b1z),12,0xa0a0a0);box.add(bus);box.add(NodeUtils.buildNodeWithCommon(gpg(-15,b2,0),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(-13,b2,0),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(-11,b2,0),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(-9,b2,0),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(-15,b2,7),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(-13,b2,7),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildNodeWithCommon(gpg(-11,b2,7),serverSize,s1,null,null,null,"s"));box.add(NodeUtils.buildLink([gpg(-15,l2,0),gpg(-15,l2,4)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(-13,l2,0),gpg(-13,l2,4)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(-11,l2,0),gpg(-11,l2,4)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(-9,l2,0),gpg(-9,l2,4)],3,0x00AAA0));box.add(NodeUtils.buildBus(gpg(-16,l2,4),gpg(-8,l2,4),12,0xa0a0a0));box.add(NodeUtils.buildLink([gpg(-15,l2,7),gpg(-15,l2,4)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(-13,l2,7),gpg(-13,l2,4)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(-11,l2,7),gpg(-11,l2,4)],3,0x00AAA0));box.add(NodeUtils.buildLink([gpg(-9,l2,0),gpg(-9,ly,0),gpg(0,ly,0)],3,0x20AA20));var plane:Node = NodeUtils.buildPlane(new Vector3D(-800,100,300),new Vector3D(400,400,400),0xA0EEA0,"floor");box.add(plane);plane.setStyle(Style3D.ZORDERING_LAYER,-50);plane.setStyle(Style3D.BOTH_SIDES_VISIBLE,true);box.add(NodeUtils.createText(new Vector3D(-700,l2+20,100),"Group B",0xFFA0A0));
}


于是我们就得出了如此的层次结果

由于我们使用了TWaver 3D的开发包,因此自然而然地就带上了必要的3D交互,例如整个场景的旋转,双击机柜节点切换场景中心,鼠标滚轮进行场景缩放等等。大家可以点击此处体验一下

Demo的简要介绍请参看论坛相关内容

关于demo的详细代码,请到此处下载
见原文最下方

 

这篇关于使用3D呈现拓扑的多层次结构的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/696299

相关文章

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,:本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

使用Python实现矢量路径的压缩、解压与可视化

《使用Python实现矢量路径的压缩、解压与可视化》在图形设计和Web开发中,矢量路径数据的高效存储与传输至关重要,本文将通过一个Python示例,展示如何将复杂的矢量路径命令序列压缩为JSON格式,... 目录引言核心功能概述1. 路径命令解析2. 路径数据压缩3. 路径数据解压4. 可视化代码实现详解1

Pandas透视表(Pivot Table)的具体使用

《Pandas透视表(PivotTable)的具体使用》透视表用于在数据分析和处理过程中进行数据重塑和汇总,本文就来介绍一下Pandas透视表(PivotTable)的具体使用,感兴趣的可以了解一下... 目录前言什么是透视表?使用步骤1. 引入必要的库2. 读取数据3. 创建透视表4. 查看透视表总结前言

Python 交互式可视化的利器Bokeh的使用

《Python交互式可视化的利器Bokeh的使用》Bokeh是一个专注于Web端交互式数据可视化的Python库,本文主要介绍了Python交互式可视化的利器Bokeh的使用,具有一定的参考价值,感... 目录1. Bokeh 简介1.1 为什么选择 Bokeh1.2 安装与环境配置2. Bokeh 基础2

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数