图扑软件自研 HT for Web 产品曾参与搭建了众多拓扑可视化解决方案。如机房通信拓扑可视化，实现通过图形图像直观展示机房内部网络设备、服务器、存储设备以及之间连接关系的技术。...系统分析 在 HT 中，ht.Node 可充当拓扑图中的“点”角色，ht.Node 上可显示图片图标，这使得创建拓扑图时能够直观地表示每一个“点”的特征。...至于拓扑图中的“线”，即用于体现两个节点之间关系的元素，可由 ht.Edge 类型承担这一任务。...在搭建 HT 拓扑图前，我们需要先创建一个 HT 的 2D 视图： const dm = new ht.DataModel(); // 创建一个数据模型 const g2d = new ht.graph.GraphView...直观性：将抽象的关系和数据通过图形呈现，使得人们可以直观地理解和分析系统或网络的结构。
HTML5 中的 Canvas 对文本的渲染（fillText，strokeText）性能都不太好，比如设置字体（font）、文本旋转（rotation），如果绘制较多的文本时，一些交互操作会手动很大的影响...我们不妨来试试，在 GraphView 中添加若干个 node、edge、group 等节点，并且每个节点上都显示文本（包括线条，上图所示），看看拓扑的缩放效果怎么样。...接着是常见网络拓扑图 GraphView 组件，并将其添加到 DOM 中，重载 GraphView 的 getLabel 方法设置图元的文本，让每个节点都有文本。...我们来看看，加上上面的代码后，对 GraphView 操作后的效果图： ?
传送门：http://visjs.org/ demo代码 <!doctype html> <html> <head> <title>vis.js ne...
在前面《百度地图、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应用中我们需要根据图元的经纬度信息换算出
学GIS空间数据库的时候，拓扑方面内容笔记 拓扑的定义 拓扑是研究几何图形或空间在连续改变形状后还能保持不变的一些性质的一个学科。它只考虑物体间的位置关系而不考虑它们的形状和大小。...“拓扑”就是把实体抽象成与其大小、形状无关的“点”，而把连接实体的线路抽象成“线”，进而以图的形式来表示这些点与线之间关系的方法，其目的在于研究这些点、线之间的相连关系。...表示点和线之间关系的图被称为拓扑结构图。拓扑结构与几何结构属于两个不同的数学概念。在几何结构中， 我们要考察的是点、线、面之间的位置关系，或者说几何结构强调的是点与线所构成的形状及大小。...平面拓扑关系 对于一般的拓扑关系，一图概括如下 Egenhofer和Franzosa在1991年共同撰写的论文Point-Set Topological Spatial Relations，为空间拓扑...) 空间目标之间的拓扑关系推理 两条线的直线段之间基本空间拓扑关系的推理 点与其他类型空间目标之间的拓扑关系决策树 线与面之间的全域空间拓扑关系决策树 面与面之间的全域空间拓扑关系基本类型的决策树
结合 《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型，以下为构建上图界面效果的模型代码部分： // init data...其实自动布局无法提供算法进行图元摆放，以便达到业务展示的需求，可参考《电信网络拓扑图自动布局 - 曲线布局》和《电信网络拓扑图自动布局 - 总线布局》，这两篇文章详细分析了如果自定义出总线和沿着任意曲线布局的案例...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤，其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用，如果需要数据存储可参考《HT...，不收任何约束，可以随心所欲的设计你的网络拓扑图整体系统架构。...更多 HTML5 拓扑图例子可参考：http://www.hightopo.com/demos/index.html ?
效果图 2d 3d ? ? 代码实现 其实不管是 2d 还是 3d，在 HT 中，数据绑定不分维度的，所以两者在实现上非常类似。...如果节点都没有创建，也不可能获取到图片对应的节点（或者说如果直接把这个矢量图拿来作为一个节点的图片，有可能出现的情况就是，六个设备的变化情况都一模一样！毕竟是同一个节点！）。...所以我们得把这些特殊的部分从图片中删除掉，然后在对应的位置填充上节点，再给节点设置上设备的矢量图。先把对应位置的矢量图删除掉，如下图红框部分： ?...我们在红框部分单独创建八个设备节点，并给这八个节点分别设置同一张矢量图。诶？你可能会诧异为什么同一张图显示却不同（灯亮的变化顺序不同），下面我们来看看这是怎么完成的。 ?...那么这八个拥有相同矢量图的设备是如何通过代码控制闪烁灯随机变化的呢？关键就在我们上面绘制的矢量图中，前面有意略过了这部分：数据绑定。
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用，HT 内部封装了一个拓扑图形组件 ht.graph.GraphView（以下简称 GraphView）是 HT 框架中 2D 功能最丰富的组件...简单说来就是：拓扑图是泛化的说法，电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等，简单说就是节点连线构成的这些都是这里指的拓扑图。...用 HT 开发一个网络拓扑图是非常容易的一件事，只需要短短几行代码就能完成一个简单的服务器与客户端的拓扑图： ? 这个例子非常基础，几乎完成了服务器与客户端在拓扑上的所有功能。...减去空行也就 50 行，我还做了很多样式部分的设计，毕竟给大家看的例子不能太丑嘛~ 我们在最开始就说明一下，HT 是基于 HTML5 标准的企业应用图形界面一站式解决方案， 其包含通用组件、拓扑组件和...接下来解析代码部分，首先，搭建拓扑图场景： dm = new ht.DataModel();//数据容器 gv = new ht.graph.GraphView(dm);//拓扑组件 参数为dm 绑定的数据模型
组合逻辑描述网路功能的体系结构，配置形式描述网路单元的邻接关系，即以交换中心（或节点）和传输链路所组成的拓扑结构。...常见的网络拓扑结构有星型结构、总线结构、环形结构、树形结构、网状结构、混合型拓扑以及蜂窝拓扑结构等，本文的例子主要描绘的是总线型拓扑，在显示上相对其他的结构类型来说更清晰明了，绘制起来也非常容易。...虽然题目起的名字是电信网络拓扑图，几乎所有的拓扑图都能涵盖，例如基本网络图，网络拓扑图，机架图，网络通信图，3D网络图等等。 效果图如下： ? 这个图看起来挺简单的，代码也少，但是内容不少。...首先，机柜01、机柜02、机柜03 都是 ht.Group “组”类型，ht.Group 类型用于作为父容器包含孩子图元，在 GraphView 拓扑图（http://www.hightopo.com）...dataModel.setAutoAdjustIndex(false);//将自动调整data在容器中索引顺序的开关关闭 dataModel.sendToTop(exchange);//将data在拓扑上置顶
dataModel.add(device2); dataModel.add(device2_edge); } 3、连线 HT for Web 提供了默认的直线和多点的连线类型能满足大部分基本拓扑图形应用... edge：当前连线对象； gap：多条连线成捆时，本连线对象对应中心连线的间距； graphView：当前对应拓扑组件对象
如果你不打算这方面深度学习，建议看完前面几张图之后就可以了或者直接不要看这篇文章，因为它的拓扑关系太复杂了。...下面是作者按照编译的依赖关系整理的lib库调用关系链。...envoy_main_entry_lib 2.第二层: platform_impl_lib envoy_main_common_lib 这个库属于核心库，依赖很多，后面主要来展示它的调用关系
现有若干趟车次在这条线路上行驶，每一趟都满足如下要求：如果这趟车次停靠了火车站 x，则始发站、终点站之间所有级别大于等于火车站 x 的都必须停靠。（注意：起始站...
级联实例的关系不好体现 基于双主模式的复制拓扑难以体现 读写分离的关系不好体现 不支持跨机房容灾的复制关系 所以这些问题抛出来，也算是自我革命，整体上来看这种关系的维护是比较复杂的，如果碰到一些略微复杂的场景...比如这种烟囱架构，不说它好与不好，但就从复制拓扑关系层面，单纯的主从模式也是难以支撑的。 ?...如果是这种复制拓扑关系，基本上能够解决我们所说的拓扑关系。 ?...MySQL 8.0有个特性叫做replicaSet,这个特性的名字给了我新的启发，那就是我们可以按照复制集的角度去重新看待原来的拓扑关系。...不支持域名 一主多从的关系不够清晰 级联实例的关系不好体现 基于双主模式的复制拓扑难以体现 读写分离的关系不好体现 不支持跨机房容灾的复制关系 其实2，3，4，6是可以支持的，而对于域名服务的部分，目前看和复制拓扑没有直接的关系
开发需求背景 今天领导派了一个小活，要求我将公司的物联网平台的网络拓扑图画出来。做一个数据展示的页面，集成到现有的iot平台上。 说到拓扑图，大家都也都比较清楚，能够清晰地表示网络链路的链接关系。...网络拓扑图是指由网络节点设备和通信介质构成的网络结构图。...一般的拓扑图都是这样子的 还有这一种 这些设计图都是架构师使用软件画出来的，数据都是固定的，不支持动态修改，没有动效，而我们需要支持动态添加网络节点。需要有动效。...经过一天不歇的努力，终于在下班前做出来了一个原型图。 先给大家看看，下面来详细讲解如何使用echarts一步一步完成这个拓扑图的。...此外需要注意一下，我们的设备图表使用的是series-graph 可以用于展现节点以及节点之间的关系数据。
使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发有 Chart 需求的项目的时候，感觉很痛苦，HT 集成的 Chart 组件中，并不包含有坐标，在展现方面不是很直观，但是也不是没有解决方案...接下来来看下 axisChart 的具体使用及几个简单的例子： 例1:设计同一时刻不同小区之间的电流电压情况的柱状图柱状图： ?
使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候，感觉很痛苦，HT 集成的 Chart 组件中，并不包含有坐标，在展现方面不是很直观，但是也不是没有解决方案...接下来来看下 axisChart 的具体使用及几个简单的例子： 例1:设计同一时刻不同小区之间的电流电压情况的柱状图柱状图： ?
计算机网络的拓扑结构是引用拓扑学中研究与大小，形状无关的点、线关系的方法。把网络中的计算机和通信设备抽象为一个点，把传输介质抽象为一条线，由点和线组成的几何图形就是计算机网络的拓扑结构。...网络的拓扑结构反映出网中各实体的结构关系，是建设计算机网络的第一步，是实现各种网络协议的基础，它对网络的性能，系统的可靠性与通信费用都有重大影响。...拓扑还分为：总线拓扑、星型拓扑、环形拓扑树形拓扑以及网状拓扑。这篇文章写的案例就是总线拓扑中的一个分支，我们一步一步来搭建这个拓扑图形。 示例图片： ?...，可扩展成工作流和组织图等企业应用。...HT 对 HTML5 技术封装的目的在于提高开发效率和可维护性，但并不意味着不允许用户直接操作 HTML 原生元素， 有 HTML5 开发经验的程序员，在了解 HT 系统机制的前提下，大可运用各种 HTML5
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
