学GIS空间数据库的时候，拓扑方面内容笔记 拓扑的定义 拓扑是研究几何图形或空间在连续改变形状后还能保持不变的一些性质的一个学科。它只考虑物体间的位置关系而不考虑它们的形状和大小。...表示点和线之间关系的图被称为拓扑结构图。拓扑结构与几何结构属于两个不同的数学概念。在几何结构中， 我们要考察的是点、线、面之间的位置关系，或者说几何结构强调的是点与线所构成的形状及大小。...平面拓扑关系 对于一般的拓扑关系，一图概括如下 Egenhofer和Franzosa在1991年共同撰写的论文Point-Set Topological Spatial Relations，为空间拓扑...九交模型 三维空间拓扑关系 点-点空间关系2种：相离、相等； 点-线空间关系3种：相离、相接、包含于； 点-面空间关系3种：相离、相接、包含于； 点-体空间关系3种：相离、相接、包含于； 线-线空间关系...) 空间目标之间的拓扑关系推理 两条线的直线段之间基本空间拓扑关系的推理 点与其他类型空间目标之间的拓扑关系决策树 线与面之间的全域空间拓扑关系决策树 面与面之间的全域空间拓扑关系基本类型的决策树
级联实例的关系不好体现 基于双主模式的复制拓扑难以体现 读写分离的关系不好体现 不支持跨机房容灾的复制关系 所以这些问题抛出来，也算是自我革命，整体上来看这种关系的维护是比较复杂的，如果碰到一些略微复杂的场景...比如这种烟囱架构，不说它好与不好，但就从复制拓扑关系层面，单纯的主从模式也是难以支撑的。 ?...如果是这种复制拓扑关系，基本上能够解决我们所说的拓扑关系。 ?...MySQL 8.0有个特性叫做replicaSet,这个特性的名字给了我新的启发，那就是我们可以按照复制集的角度去重新看待原来的拓扑关系。...不支持域名 一主多从的关系不够清晰 级联实例的关系不好体现 基于双主模式的复制拓扑难以体现 读写分离的关系不好体现 不支持跨机房容灾的复制关系 其实2，3，4，6是可以支持的，而对于域名服务的部分，目前看和复制拓扑没有直接的关系
如果你不打算这方面深度学习，建议看完前面几张图之后就可以了或者直接不要看这篇文章，因为它的拓扑关系太复杂了。...下面是作者按照编译的依赖关系整理的lib库调用关系链。...envoy_main_entry_lib 2.第二层: platform_impl_lib envoy_main_common_lib 这个库属于核心库，依赖很多，后面主要来展示它的调用关系
前序 由于业务需要，我学习了判断点与点、点与线、线与线的关系的算法、理论，这里汇总下，主要内容有： 点与点的关系 点与线的关系 线与线的关系 点与点 点与点关系相对最简单，使用勾股定理即可： 这是怎样计算两个已知坐标点之间的距离...我们现在可以解 c (两点之间的距离）： 开始： c2 = a2 + b2 代进 a 和 b 的式： c2 = (xA − xB)2 + (yA − yB)2 结果： 点与线的关系...点乘的几何意义是可以用来表征或计算两个向量之间的夹角，以及在b向量在a向量方向上的投影，有公式： 推导过程如下，首先看一下向量组成： 定义向量： 根据三角形余弦定理有： 根据关系c=a-b（a、...从而就可以进一步判断这两个向量是否是同一方向，是否正交(也就是垂直)等方向关系，具体对应关系为： a·b>0 方向基本相同，夹角在0°到90°之间 a·b=0 正交，相互垂直...线与线的关系 常用问题： 线与线是否相交？
HTML5 中的 Canvas 对文本的渲染（fillText，strokeText）性能都不太好，比如设置字体（font）、文本旋转（rotation），如果绘制较多的文本时，一些交互操作会手动很大的影响...我们不妨来试试，在 GraphView 中添加若干个 node、edge、group 等节点，并且每个节点上都显示文本（包括线条，上图所示），看看拓扑的缩放效果怎么样。...接着是常见网络拓扑图 GraphView 组件，并将其添加到 DOM 中，重载 GraphView 的 getLabel 方法设置图元的文本，让每个节点都有文本。
在现在前端圈大行其道的 React 和 Vue 中，可复用的组件可能是他们大受欢迎的原因之一， 在 HT 的产品中也有组件的概念，不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的...下面我以一个进度环为例，来探究一下如何使用ht.js封装出一个拓扑组件。 效果图 ?
对于现在火如荼的HTML5应用，我们可以借助PhoneGap对其打包，然后像原生APP一样发布它们；或者要求用户直接通过浏览器访问。...大家可以看到我们的主屏幕上已经多了一个”APP”，如果细心优化，用户完全无法区分这是一个原生应用还是HTML5应用，极大提升了用户体验。 是不是很神奇？...接下来我们以HT for Web的拓扑应用为例，试着实现这样一个”高仿”的APP，先看一下我们的页面在iPhone浏览器中的效果： ?...缓存的用法也有两篇很好的文档： 1、HTML5离线缓存 2、在客户端存储数据 最后上一段操作视频，看一下最终效果，优酷链接：http://v.youku.com
在前面《百度地图、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应用中我们需要根据图元的经纬度信息换算出
使用 HT UI 的 Popover 插件 UI 库是一款功能强大的界面组件库，基于 HT 核心包的优秀框架和 HTML5 先进的 Canvas 机制，具有易上手、高性能、易扩展、组件丰富、跨平台等特点..._hoverNode = newNode; } }); graphView.addToDOM(); } 通过 getView() 可以获取到拓扑组件的根层 div，对其监听鼠标移动事件
传送门：http://visjs.org/ demo代码 <!doctype html> <html> <head> <title>vis.js ne...
HT for Web（http://www.hightopo.com/guide/readme.html）提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案，正如Hightopo官网所表达的我们希望提供...讨论前先设定话题的边界，HT是基于HTML5的图形组件库，因此文章的案例更多会涉及HTML和JavaScript语言，但并不局限于Web前端，设计思想上同样适用于任何GUI语言平台。...熟悉Flex的程序员应该都了解Tour de Flex这个包罗万象的大杂烩，其中的网络监控拓扑Network Monitor特别其动画切换效果一直给我很深印象，这里不可能有篇幅实现完整例子，我们仅尝试实现其展示
拓扑结构在计算机网络设计和通信领域中非常重要，因为它描述了网络中的设备（即“点”）如何相互连接（即通过“线”）。这种结构不仅涉及物理布局，即物理拓扑，还可以涉及逻辑或虚拟的连接方式，即逻辑拓扑。...图扑软件自研 HT for Web 产品曾参与搭建了众多拓扑可视化解决方案。如机房通信拓扑可视化，实现通过图形图像直观展示机房内部网络设备、服务器、存储设备以及之间连接关系的技术。...至于拓扑图中的“线”，即用于体现两个节点之间关系的元素，可由 ht.Edge 类型承担这一任务。...直观性：将抽象的关系和数据通过图形呈现，使得人们可以直观地理解和分析系统或网络的结构。...动态性：能够实时反映系统或网络的变化，及时展现新增元素和调整后的结构关系，对于监控和管理系统状态尤为重要。 灵活性：用户可以根据需要选择不同的布局算法，调整图形的展示方式，更好地适应不同的分析场景。
结合 《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型，以下为构建上图界面效果的模型代码部分： // init data...、连线、组、子网等图元内容，并填充如图元名字、连线颜色、告警内容等属性信息，而因为 HT 技术基于 HTML5，因此大部分工业控制 Web SCADA 客户都采用了 WebSocket 的实时通讯方式，...构建完图元连线关系，设置完图元风格属性，接下来主要就是图元摆放问题，对于工业控制领域的图元摆放一般是手工进行，所以 Web SCADA 工业控制领域一般会构建一套针对自己产品的 HMI 人机界面绘图工具...以上创建网络图元、设置图元连线关系、配置图元风格属性、进行图元布局摆放就是构建拓扑图的几个基本步骤，其实熟悉了 HT 分分钟就能开发出像模像样的 HTML5 网络拓扑图应用，如果需要数据存储可参考《HT...更多 HTML5 拓扑图例子可参考：http://www.hightopo.com/demos/index.html ?
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合...在2D拓扑下模拟3D树状结构每层的半径计算 在3D下的树状结构体最大的问题就在于，每个节点的层次及每层节点围绕其父亲节点的半径计算。...并不是我们前面计算出来的半径，而应该加上末端节点自身的领域半径，因为它们之间存在着包含关系，子节点的领域必须包含于其父亲节点的领域中，那我们在看看上图，是不是感觉末端节点的领域被侵占了。...搞定，就是这样子了，2D拓扑上面的布局搞定了，那么接下来该出动3D拓扑啦~ 3....也不需要太大的改造，我们只需要修改下布局器并且将2D拓扑组件改成3D拓扑组件就可以了。
前言 发现大家对于我从 json 文件中直接操作节点属性来控制界面的动态变化感到比较好奇，所以这篇就针对数据绑定以及如何使用这些绑定的数据做一篇说明，我写了一个...
但，我还是不喜欢DOM上太重都是元素，不喜欢庞大包罗万象搞得没有一家能完美实现的标准，另外用XML、Flex的MXML或Sliverlgiht/WPF的XAML来描述图形实在是笨重不灵活，基于HTML5...HT for Web不仅定义矢量格式、实现了矢量绘制，还提供了矢量编辑工具设计器，用户拖拖拽拽就能绘制出矢量图形，然后导出JSON，注册到HT之后即可使用到所有的HT组件上，注意哦：是所有组件，不仅仅是拓扑
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台（http://www.hightopo.com/blog/70.html），这篇我们将进一步折腾，将算法运行到真正的后台
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
