拓扑图

我们上一篇《 基于 WebSocket 实现 WebGL 3D 拓扑图 实时数据通讯同步（一） 》主要讲解了如何搭建一个实时数据通讯服务器，客户端与服务端是如何通讯的，相信通过上一篇的讲解，再配合上数据库的数据储存，我们就可以实现一个简易版的 Web 聊天工具了，有空的朋友可以自己尝试下实现，那么我们今天的主要内容真的是实现 WebGL 3D 拓扑图实时数据通讯了，请大家接着往下看。 有了前面的知识储备，我们就可以来真正实现我们 3D 拓扑图 组件上节点位置信息的实时数据同步了，毋庸置疑，节点的位置信息必须是在服务端统筹控制，才能达到实时数据同步，也就是说，我们必须在服务端创建 DataModel 来管理节点，创建 ForceLayout 弹力布局节点位置，并在节点位置改变的过程中，实时地将位置信息推送到客户端，让每个客户端都更新各自页面上面的节点位置。 在服务端我们该如何创建 HT 的 DataModel 和 ForceLayout 呢？其实也很简单，我们可以看看下面的代码： var ht = global.ht = this.ht = require('../../../build/ht-debug.js').ht, dataModel = new ht.DataModel(), reloadModel = require("../util.js").reloadModel;

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> ECharts 图形组件在 1 . 0 发布的时候我就已经有所关注，今天在做项目的时候遇到了图标的需求，在 HT for Web 上也有图形组件的功能，但是在尝试了下具体实现后，发现 HT for Web 的图形组件是以矢量的格式来呈现的，在展现上可以有很多的自定义和数据绑定等特性，但是其在交互的设计上就显得比较弱势。 因此我就在想，是否可在项目中将 ECharts 图形组件代替 HT for Web 的图形组件呢，在对 ECharts 做了初步的了解后，发现两者都是基于 Div 和 canvas 的应用，于是我开始做大胆的尝试，终于，功夫不负苦心人，下面就来看下 Demo 的具体展现效果吧： 这是从 ECharts 官方 Demo 中拷贝下来的两个例子，其中在布局上用到了 HT for Web 的 SplitView 组件将两个 chart 以上下比例 3 ： 2 分割。 光看这个例子并无法很直观的看出 ECharts 和 HT for Web 应用的结合，接下来我们来看下 HT for Web 拓扑图组件 与 ECharts 图形组件的整合效果： 在这个 Demo 中就整合了 HT for Web 的 Tree 组件， GraphView 拓扑图组件和 ECharts 图形组件，并采用 HT for Web

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 之前我们采用过 Openlayers+Qunee的方案 ，实现地图拓扑图，鉴于Openlayers是一个古老项目，略显臃肿，对于现代的前端地图应用，显得笨重，在客户的介绍下，我们找到了leaflet - 基于HTML5的轻量地图客户端方案，结合Qunee使用，以及第三方插件，实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件，作者在乌克兰，在移动设备上的有良好的体验，比较新和现代的地图客户端，类库压缩后只有33k，非常小巧，这一点让qunee都相形见绌，先看一个leaflet的入门示例 官方示例 首先引入leaflet相关js和css <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 然后构建地图，并添加openStreetMap // create a map in the "map" div, set the view to a given place and zoom var map = L.map('map')

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 地图应用分三种级别：示意地图（Map Chart），地图（Map），地理信息系统（GIS），第一种通常使用相对坐标系，后两种则为真实的地理坐标，其中第二种以谷歌地图为代表，日常生活中普遍使用，后一种则为专业的GIS，专业领域做拓扑分析、流域分析时用到，示意地图我们已经有很多例子，比如 美国大选示例 、 中国地图示例 等，今天介绍第二种地图的应用，结合OpenLayers和谷歌地图实现地图的拓扑图应用： demo.qunee.com/map/map.html 创建地图 OpenLayers是开源地理基金会作（OSGeo.org）支持的项目之一，是一种通用的地理客户端平台，支持谷歌地图，Bing地图，WMS，GML等多种地图在线服务，这里用到的是谷歌地图，需要引入OpenLayers和google map的js类库和css文件 引入相关类库 <link rel="stylesheet" href="OpenLayers/theme/default/style.css" type="text/css"> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script> <script src="OpenLayers

http://www.hightopo.com/demo/pipeline/index.html 《 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇 》里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果，例如 http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html 这个 3D 电信机房监控例子整个都是通过 HT 提供的 API 构建而成： 不过这个例子中的模型都比较规矩，也就消防栓由一个球 + 圆通构成，其他图形通过 HT 提供的基本 Node 以及 Shape 对象即可搞定： 但这并不意味着 API 只能做简单的模型，《 HT for Web 建模手册 》中介绍的 HT 建模插件可以让有想象力的同学做出各种不可思议的效果。例如这个餐座椅的例子： http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_custommodel.html 对于这个餐座椅的例子，特别是一些不规则的花盆、酒杯、圣诞树和那颗爱心，很多人好奇我们是怎么搞出来的。其实蛮简单，就用了《 HT for Web 建模手册 》中的 createRingModel 和

在前面《 电信网络拓扑图自动布局之总线 》一文中，我们重点介绍了自定义 EdgeType 的使用，概括了实现总线效果的设计思路，那么今天话题是基于 HT for Web 的曲线布局（ShapeLayout）。 ShapeLayout 从字面上的意思理解，就是根据曲线路径来布局节点，省去手动布局节点的繁琐操作，还能保证平滑整齐地排布，这是手动调整很难做到的。ShapeLayout 结合前面提到的总线，是最普遍的应用。 http://www.hightopo.com/demo/EdgeType/ShapeLayout-Oval.html 我们先来看看最简单的圆和椭圆是如何实现自动布局的。我们知道在几何学中，圆和椭圆是可以用三角函数老表示，那么我们就可以将圆或者椭圆分成若干份，通过三角函数就可以算出圆或椭圆上的一点，将节点放到计算出来的点的位置，这样就可以达到 自动布局 的效果。具体的核心代码如下： var radians = Math.PI * 2 / nodeCount, w = width / 2, h = height / 2, a = Math.max(w, h), b = Math.min(w, h), x, y, rad, node; if (shape === 'circle') a = b = Math.min(a, b); for (var i = 0; i <

在前面《 电信网络拓扑图自动布局 》一文中，我们大体介绍了 HT for Web 电信网络拓扑图自动布局的相关知识，但是都没有深入地描述各种自动布局的用法，我们今天在这边就重点介绍总线的具体实现方案。 在 HT for Web 的连线手册中，有说明可以自定义连线类型，通过 ht.Default.setEdgeType(type, func, mutual) 函数定义，我们今天要描述的总线也是通过这样的方法来实现的。 我们来简单地描述下这个方法，虽然在文档（ http://www.hightopo.com/guide/guide/plugin/edgetype/ht-edgetype-guide.html ）中已经描述得很详细了，为了下面的工作能够更好的开展，我这边还是再强调下。 这个函数名是 setEdgeType，顾名思义，它是用来自定义一个 EdgeType 的，那么第一个参数 type 就是用来定义这个 EdgeType 的名称，在 Edge 的样式上设置 edge.type 属性为 type 值，就可以让这条连线使用是我们自定义的 EdgeType。 那么第二个参数呢，就是用来计算连线的走线信息的函数，这个回调函数将会传入四个参数，分别是：edge、gap、graphView、sameSourceWithFirstEdge，其中 edge 就是样式上设置 edge.type

HT 是啥： Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向，接着就朝这个方向慢慢打磨，如今 HT 算是达到了这样的效果，谈不上用尽洪荒之力，但我们对产品结果很满意，特别是 HT 的用户手册，将例子和文档无缝融合一体，小小 10 来兆开发包居然包含了四十五份手册，数百个活生生的 HTML5 例子，还没体验过的同学可以点击 http://www.hightopo.com/guide/readme.html HT 手册入口玩一玩。 这样综合并可搜索的 手册入口 居然还常被问及 HT 的 Demo 在哪里？只能怪这些年深入人心的极致用户体验理念，把人惯得包括很多程序员都如此之“懒”，当然也怪我们没把用户体验的最后一公里做到位，于是最近 wangyinlong 同学人工例子抓图，将数百个手册例子进行了归类整理，最终形成了方便大家直观查找所有 HT 例子的页面： http://www.hightopo.com/demos/index.html 很明显 http://www.hightopo.com/demos/index.html 相比 http://www.hightopo.com/guide/readme.html 页面，对于 HT 老用户包括我们自己做技术支持

今天没有延续上一篇讲的内容，穿插一段小插曲，WebSocket 实时数据通讯同步的问题，今天我们并不是很纯粹地讲 WebSocket 相关知识，我们通过 WebGL 3D 拓扑图来呈现一个有趣的 Demo。接下来我们就看看这个实时数据通讯是一个什么样的套路。 我们先来聊聊这次 Demo 的思路吧，首先我要有一个 3D 的 拓扑图 组件，在上面创建几个节点，然后通过拉力布局（ForceLayout）将这些节点自动布局，但是有一定，需要在不同的网页窗口下，对应节点的位置是一样的，简单地说就是不同网页窗口所呈现的节点布局是一样，而且拖动不同网页窗口中的任意的节点，都将更新所有页面窗口，让所有窗口的呈现都是一样的。 根据上面的思路，我们该如何去规划呢？既然需要实时数据通讯，那么就需要使用 WebSocket，WebSocket 又是什么呢？WebSocket 是 HTML5 一种新的协议，它没有标准的 API，各个实现都有自己的一套 API，在这里我们就不去详细研究 WebSocket 的具体实现，我也讲不了，至少现在讲不了。 在这里我们用比较易上手的 Node.js 的 Socket.IO 做通讯框架， Socket.IO 让长连接通讯变得无比简单，服务器再也不用等待客户端的请求就可以直接给客户端发送消息，根据这样的特性就可以实现数据通讯同步的问题。 我们来写一个最简单的例子

在电信网络拓扑图中，很经常需要用到自动布局的功能，在大数据的层级关系中，通过手工一个一个摆放位置是不太现实的，工作量是相当大的，那么就有了自动布局这个概念，来解放布局的双手，让网络拓扑图能够布局出一个优美的图案，当然在一些复杂的布局中，光有自动布局还是不行的，还是需要手工地做些相应的调整，才能让界面图案更加的完美。今天我们来聊聊电信网络拓扑图 HT for Web 在自动布局上面的相关内容。 在 HT for Web 中有提供两种布局方案，一个是 AutoLayout，一个是 ForceLayout。AutoLayout 提供了几套固定的布局算法，让用户根据不同的需求选择不同的布局算法，比较常用的是 circular（圆形布局）和 symmetic（对称布局）两种布局方式。 上图是 circular 圆形布局的效果，可以看出在较复杂的布局上，可以结合连线呈现一个漂亮的布局结果。 上图是 symmetric 对称布局的结果，可以发现在布局上依据中心点呈相对对称的布局，这种布局方案在空间上看起来会比较紧凑些，比较节约空间。 其他的布局类型在这就不一一讲解了，具体的可以查看我们的 AutoLayout 手册： http://www.hightopo.com/guide/guide/plugin/autolayout/ht-autolayout-guide.html ForceLayout