使用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

相关文章

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

Python使用自带的base64库进行base64编码和解码

《Python使用自带的base64库进行base64编码和解码》在Python中,处理数据的编码和解码是数据传输和存储中非常普遍的需求,其中,Base64是一种常用的编码方案,本文我将详细介绍如何使... 目录引言使用python的base64库进行编码和解码编码函数解码函数Base64编码的应用场景注意