阳泉信息港：告辞传统工业互联网，提高数字管控头脑：三维组态分布式能源站

前言 在网络迅速生长的今天，人们的交流已经不再仅限与面临面，一个视频通话就能拉近彼此之间的距离，而在工业管控上却不仅仅局限于实时视频流的监控，HTML 自己拥有壮大的 web 组件可供我们去实行一些好玩的例子，甚至加上一些简朴有趣的动画和实时数据的对接，效果上可不止提高了一个水平。加上现如今已经启动许久的 工业4.0 衍生出的新一代 工业互联网 和不久才面世于众的 5G 新时代，数据可视化与网络带宽生长的碰撞，引发出了一代 3D 数据可视化羁系的生长。而&NBsp; Hightopo（以下简称 HT ）的  HT for Web 产物上的  web 组态提供了厚实的  2D 组态和  3D 组态效果，可以凭据需求快速实现一套完整的数据可视化系统。本文将通过一个 HT 的  3D 组态实现的一个可视化漫衍式能源站系统带你走进厚实的组态的大门。   界面简介及效果预览 场景搭建上我们出现了以热、电、冷联供为主要形式的多联产系统的漫衍式能源站系统，凭据管道流动通报的流程步骤下，有效地实现了能源的梯级行使的展示效果：     代码实现 在能源站的建设中，漫衍式能源站是指小规模化、行使热、电、冷联供为主要形式漫衍于负荷四周的清洁环保发电设施，是一种相对可靠又高效的发电形式。 3D 场景实现上通过建立  ht.grAPh3d.Graph3DView 来出现 3D 的内容，3D 视图组件举行 deserialize() 反序列化对应的 json 出现出 3D 场景内容，然后将 3D 组件再加入到 body下的方式实现场景的加载渲染的效果。还可以自界说修改一些交互或者视角上的限制，如修改左右键的交互方式或者设置场景的最大仰角，都能使用户在交互体验上更为流通。

// 建立三维拓扑视图
this.g3d = new ht.graph3d.Graph3dView();
this.g3dDm = this.g3d.dm();
// 将 3D 组件加入到 body 下
this.g3d.addToDOM();
// 修改左右键交互方式
let mapInteractor = new ht.graph3d.MapInteractor(this.g3d);
this.g3d.setInteractors([mapInteractor]);
// 修改最大仰角为 PI / 2
mapInteractor.maxPhi = Math.PI / 2;

 

为了能在悬浮修建模子的时刻，视觉上有交互体验，这里设置了模子的高亮模式。

// 设置鼠标悬浮高亮模式
this.g3d.setHighlightMode('mouseover');
// 设置高亮颜色
ht.Style['highlight.color'] = '#FEB64D';

 

场景渲染加载出来后，我们就能对于漫衍式能源站的工业流程可以通过管道的动画来展示。HT 提供的 ht.Shape 是极其壮大的图元类型，其在 GraphView 和 Graph3dView 组件上都能展示出种种二维和三维的形状效果， 其扩展子类 ht.PolyLine 可实现三维空间管道的功效，我们可以通过 ht.PolyLine 绘制出流程所经的路径，通过 ht.Default.startAnim() 动画函数去执行挪用转变管道上的 uv 贴图的偏移值，就可以到达流动的效果。

实现的代码如下：

animflow() {
    // 动画执行函数
    ht.Default.startAnim({
        duration: 2000,
        easing: (t) => { return  t },
        action: (v, t) => {
            // 通过数据模子获取唯一标识 tag 获得管道节点设置 uv 偏移流动动画
            this.g3dDm.getDataByTag('flow1').setStyle('top.uv.offset', [ v, 0 ]); 
            this.g3dDm.getDataByTag('flow2').setStyle('top.uv.offset', [ v, 0.5 ]);
            this,g3dDm.getDataByTag('flow3').setStyle('top.uv.offset', [ -v, 0.5 ]);
            ...            
        },
        finishFunc:  () => {
            animflow();
        }
    });
}

 

而场景中出现出来的数据，我们可以通过对接一些主流的接口，例如 ajax、axiOS 或者是 WebSocket，凭据自己对接交互的需求，可以判断接纳轮询挪用接口或者是对接双向举行数据传输，起到实时刷新数据的需求，而数据的载体可以对接到 HT 的 3D通告板 billboard 上举行展示：

 

billboard 同样是基于 ht.Shape 的子类，对于 Shape 不管是在 2D 组态或者是 3D 组态上出现，都可以通过一些界说的属性 styleMap 来设定一些自己自带的属性值，固然用户也可以自己通过在 attrObject 里设定一些自界说属性。而漫衍式能源站中，我们通过对 billboard 设定了一些属性值来控制通告板的属性信息：

let billboard = new ht.Node();
billboard.s({
    // 设定 shpe3d 的类型为通告板 billboard
    "shape3d": "billboard",
    // 设置通告板的图片 image
    "shape3d.image": "symbols/htdesign/box/panel.json",
    // 设置通告板始终自动旋转面临屏幕
    "shape3d.autorotate": true,
    // 设置通告板开启透明
    "shape3d.transparent": true,
    // 设置通告板不能移动
    "3d.movable": false,
    // 设置通告板始终置顶
    "shape3d.alwaysOnTop": true,
    // 设置通告板不能选中
    "3d.selectable": false,
    // 通告板开启缓存
    "shape3d.image.cache": true
});

 

若是贴图是矢量，对于开启了缓存的通告板，性能上会大大提高。对比一下这个 例子，你会发现缓存机制上性能的差异性。由此看出，缓存机制对于整体场景的流通度是至关重要的，对于一些不必要实时刷新的面板信息，我们可以接纳缓存的方式，并且在下一次更新的时刻挪用 Graph3dView.invalidateShape3DCachedImage(node)来手动刷新这个节点，从而大大提高了场景的性能：

g3d.invalidateShape3dCachedImage(billboard);

  总结 历经了2018的工业互联网元年和2019的 5G 元年，不止是漫衍式能源站可视化系统的出现，工业互联网在管控方面将迎来了新时代。为了给精彩的 HTML web 组态添加上壮丽的颜色，HT 在 2D 组态和 3D 组态上不断地完善，可以通过 2/3D 融合的场景与图纸搭建出一个个好玩的可视化系统。而作为在 3D 组态上可以出现出多样化效果下搭建的可视化系统场景，传统上一些数据可视化的工艺流程同样能通过 2D 组态来实现：换热站远程监控系统   2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集，在这里你能发现许多新颖的实例，也能发掘出不一样的工业互联网：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA 同时，你也可以查看更多案例及效果：https://www.hightopo.com/demos/index.html,

诚信在线

诚信在线 www.nzg8.com自与农展馆合作以来,拓展了业务战线,深化了服务体系,整合了群体,在未来的2019年,将能更好地为诚信在线娱乐网的会员提供更优质的服务。