[TOC] 0x00 快速入门 为什么要画拓扑图？ 答：拓扑图可以向用户或者他人表达我们的设计思想与理念,以及展示设计的特点/目的/功能。...对于我们系统规划人员来说无论是做网络规划/系统设计/网络管理，画拓扑图是一个最基本能力; 对于我们网络管理员来说,画拓扑图/排列图可以记录企业网络连接/设计/规划等一系列重要资料,为管理和后期排错，故障解决...Step1.先看单位画好的拓扑图进行模拟照画 Step2.到机房看看具体的机器设备与走线连接情况,为后面画出机房图做准备 Step3.找到单位已经规划/部署好的网络(相关文档),记录设备的位置/连接关系画拓扑图...Steo4.在自己的空闲时间从零开始画拓扑图,先从最小/最简单的网络画起,然后再逐渐壮大成一个大型网络; 画拓扑图的注意事项： 需要简单明了/间接 合理的用不同字号/颜色/颜色标注; 多个机柜进行分类如...机房示意图 描述：主要是画出机房中每个机柜的设备位置,以及产品的名称型号等等; 关键点：机柜/UPS/灭火器/服务器/交换机/安全设备/路由器等等排列示意图，并且注意对各机柜和设备命名; ---- 网络拓扑图
这个时候就需要使用到网络拓扑结构，使用不同拓扑结构的就会形成网络拓扑图，那么网络拓扑图是什么意思？网络拓扑图有哪些分类？下面小编就为大家来详细介绍一下。...image.png 一、网络拓扑图是什么意思？...所谓网络拓扑图就是网络节点和通信介质一起构成的网络结构图，其实通俗来说就是不同拓扑结构的展示效果图，网络拓扑图可以清晰地显示各种网络节点设备的位置，以及与其他设备连接在一起的通信介质，毕竟不同的网络拓扑结构连接方式都是一样的...，通过网络拓扑图可以清楚的看到不同结构的具体构成方式。...二、网络拓扑图有哪些分类？
[TOC] 0x00 快速入门 为什么要画拓扑图？ 答：拓扑图可以向用户或者他人表达我们的设计思想与理念,以及展示设计的特点/目的/功能。...对于我们系统规划人员来说无论是做网络规划/系统设计/网络管理，画拓扑图是一个最基本能力; 对于我们网络管理员来说,画拓扑图/排列图可以记录企业网络连接/设计/规划等一系列重要资料,为管理和后期排错，故障解决...Step1.先看单位画好的拓扑图进行模拟照画 Step2.到机房看看具体的机器设备与走线连接情况,为后面画出机房图做准备 Step3.找到单位已经规划/部署好的网络(相关文档),记录设备的位置/连接关系画拓扑图...Steo4.在自己的空闲时间从零开始画拓扑图,先从最小/最简单的网络画起,然后再逐渐壮大成一个大型网络; 画拓扑图的注意事项： 需要简单明了/间接 合理的用不同字号/颜色/颜色标注; 多个机柜进行分类如...可以划分多个不同的图 机房示意图 描述：主要是画出机房中每个机柜的设备位置,以及产品的名称型号等等; 关键点：机柜/UPS/灭火器/服务器/交换机/安全设备/路由器等等排列示意图，并且注意对各机柜和设备命名; 网络拓扑图
画拓扑图的方式有很多，在线软件，Visio，PPT，都是方法。 问题是你要怎么从0到1，怎么样用拓扑图完美地把你的网络逻辑结构、思路呈现出来。 没经验的朋友真的不知道从哪里上手。...今天就给你来一篇绘制拓扑图详解，从一页白纸开始，教你怎么从0到1亲手绘制一张拓扑图。 01、什么是网络拓扑（Topology）？...04 放置设备图标 将设备图标放置到拓扑中，可做适当调整。保持设备图标的对齐和分布。 在绘制的时候其实有许多技巧可以提高拓扑的绘制效率。...根据物理网络环境，结合客户业务逻辑结构，最终落地成逻辑的网络拓扑图，其实体现的是工程师对客户网络环境、网络需求、网络协议等的综合理解。...04、拓扑图绘制要点 01 绘制规范摘要 ● 准确呈现网络逻辑结构 ● 网络层次分明易读，设备使用情况及互联情况清晰 ● 网络关键节点信息完善、准确 ● 重点突出，节点元素可适当取舍 ● 图例注释完善
“zabbix network map”可以简单的理解为动态网络拓扑图，可以针对业务来配置zabbix map，通过map可以了解应用的整体状况：服务器是否异常、网络是否有故障、应用当前什么状态。...如果你不需要这些东西，至少你可以通过network map绘制一张网络拓扑图。...在我们未保存的情况下离开map页面，zabbix提示我们保存，那多好，可惜zabbix竟然没有这么做。为什么？...的同时，鼠标选中多个map元素，如下图： 批量修改map元素 我们批量修改了元素名称，使用macro{HOST.IP}，并且label名称在元素的左边，效果如下 批量修改map元素 map元素相连接 网络拓扑上有了服务器
在电信网络拓扑图中，很经常需要用到自动布局的功能，在大数据的层级关系中，通过手工一个一个摆放位置是不太现实的，工作量是相当大的，那么就有了自动布局这个概念，来解放布局的双手，让网络拓扑图能够布局出一个优美的图案...今天我们来聊聊电信网络拓扑图 HT for Web 在自动布局上面的相关内容。 在 HT for Web 中有提供两种布局方案，一个是 AutoLayout，一个是 ForceLayout。...forcelayout/ht-forcelayout-guide.html 现在问题来了，上面的两种布局方式其实还不能完全满足用户的需求，很多用户还有根据特定的形状去布局节点，比如，多个节点如何围绕一个节点做椭圆状的均匀分布...，多个图元如何沿着某条曲线做均匀分布。
在前端网页设计中，文本是重要的组成部分，那么在网络拓扑图中也是一样的，文本在网络拓扑图上最基本的显示功能之一，在不同的应用场景下，会有不同的需求。...HT for Web 为网络拓扑图上的节点提供了两个文本，也确实需要两个文本同时存在的情况，比如车站上面的站牌，就有汉字和拼音的组合，如果做一个公交站示意图的话，节点上的两个文本就都用得上了。...今天就模拟一个地铁站点和大家一起聊聊网络拓扑图上的文本应用。 今天拿来说明的 Demo 链接：http://www.hightopo.com/demo/label/index.html ?...node.s({ 'label': '厦门', 'label2': 'Xiamen' }); 网络拓扑图的创建及节点的创建我这边就不再多描述了，我们直奔主题，先设置 Node 上面的两个文本看看效果...'label2.offset.y': -23 }); 从上面的代码可以看到，在“图扑”和“上海”两个节点的 label 都加了“\n”回车转义字符，在 HT 的内部实现中，有对“\n”回车转义字符做解析处理
接着是常见网络拓扑图 GraphView 组件，并将其添加到 DOM 中，重载 GraphView 的 getLabel 方法设置图元的文本，让每个节点都有文本。
元旦在家没事搞了一个在线编辑网络拓扑图的功能， 主要功能有 在线管理，查看多个网络拓扑图 每个网络拓扑图的告警事件显示 每个网络拓扑 节点的详细信息显示 在线编辑，并保存网络拓扑图 为了方便，该项目使用的是项目中的...json数据，所以在编辑后需要将请求数据拷贝出来，覆盖到拓扑图节点json数据中。...以下是一个拓扑图节点的基本信息 { "id": 8685, "name": "Test", "descr": "", "type": 1, "timestamp": 201602021420036...config": "", "options": "", "parentViewId": -1, "orderCode": 0, "relSymbolId": -1 } 以下是一个拓扑图节点的信息格式
在前面《百度地图、ECharts整合HT for Web网络拓扑图应用》我们有介绍百度地图和 HT for Web 的整合，我们今天来谈谈 OpenLayers 和 HT for Web 的整合。...HT for Web作为逻辑拓扑图形组件自身没有GIS功能，但可以与各种GIS引擎即其客户端组件进行融合，各取所长实现逻辑拓扑和物理拓扑的无缝融合，本章将具体介绍HT for Web与开发免费的OpenLayers...HT和OpenLayers组件叠加在一起之后，剩下就是拓扑里面图元的摆放位置与经纬度结合的问题，常规网络拓扑图中存储在ht.Node图元的position是逻辑位置，和经纬度没有任何关系，因此在GIS应用中我们需要根据图元的经纬度信息换算出
光看这个例子并无法很直观的看出ECharts和HT for Web应用的结合，接下来我们来看下HT for Web拓扑图组件与ECharts图形组件的整合效果： ?...在这个Demo中就整合了HT for Web的Tree组件，GraphView拓扑图组件和ECharts图形组件，并采用HT for Web的SplitView组件做布局。
在前面《电信网络拓扑图自动布局》一文中，我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识，但是都没有深入地描述各种自动布局的用法，我们今天在这边就重点介绍总线的具体实现方案。...对于这种有固定表达式的形状，我们就不需要用曲线分割的方法来做总线布局了，我们完全可以获取到圆或者椭圆上的一点，所以在处理圆和椭圆上，我们获取 Edge 连边节点中线连成线，然后计算出夹角，通过圆或者椭圆的三角函数表示法计算出总线上的一点
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用，后来在ECharts的Demo中看到了有关空气质量的相关报表应用，就想将百度地图、ECharts和HT for Web三者结合起来也做一个类似空气质量报告的报表...在这个Demo中，将GraphView拓扑图组件添加到百度地图组件中，覆盖在百度地图组件之上，并且在百度地图组件上和GraphView拓扑图组件上分别添加事件监听，相互同步经纬度和屏幕位置信息，从而来控制拓扑图上的组件位置固定在地图上...在resetPosition函数中，做的事情很简单：遍历DataModel中的data，根据它们各自在地图上的经纬度来换算成屏幕坐标，并将坐标设置到相应的data中，从而达到GraphView中的节点能够固定在地图上的效果...，当取消选中是，也取消选中GraphView拓扑图中对应的节点。...GraphView交互中，我往chart实例中添加了_legendSelect变量，该变量的设定是为了阻止在GraphView交互中修改legend插件的节点属性后回调legendSelectedFun回调函数做修改
采用 HT 开发网络拓扑图非常容易，例如《入门手册》的第一个小例子麻雀虽小五脏俱全：http://www.hightopo.com/guide/guide/core/beginners/examples...对于电信网管拓扑应用，由于网络拓扑图元数据量往往常常非常巨大，虽然 HT 拓扑图组件性能非常强劲，承载好几甚至上十万的网络拓扑矢量图元都毫无压力，但如何实现这么多数据量图元的布局是个问题，如果是规规矩矩的自然比较容易...其实自动布局无法提供算法进行图元摆放，以便达到业务展示的需求，可参考《电信网络拓扑图自动布局 - 曲线布局》和《电信网络拓扑图自动布局 - 总线布局》，这两篇文章详细分析了如果自定义出总线和沿着任意曲线布局的案例...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤，其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用，如果需要数据存储可参考《HT...，不收任何约束，可以随心所欲的设计你的网络拓扑图整体系统架构。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
