前言

随着数字化，工业互联网，物联网的发展，我国加油站正向有人值守，无人操作，远程控制的方向发展，传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式，即采用数据采集与监控系统 SCADA。SCADA 系统的推广使用，大大提高了我国加油站的监控效率，本文所讲的则是通过对加油站的可视化建模，结合 HT 的 3D 可视化以及 2D 监控面板来实现对加油站的可视化监控。三维可视化监控系统是将三维的可视化技术和数据采集与监控技术融合，充分发挥了两种技术的核心优势，并通过数据库进行数据共享，共同构成一种全新的 SCADA 系统。该系统中也结合了海康的摄像头监控，通过调用海康提供的摄像头地址，实时的将视频流传输到前台，并且展示在 2d 页面上。在真实的系统中，每个加油机以及加油罐都有自己对应需要展示的数据，这个可以根据自己需要展示的内容来设计 2d 面板，之后根据后台传来的数据进行展示。数据采集与监控系统通过各类的传感器实时采集监控对象的各类数据，上传数据库并实时共享给三维可视化技术搭建的监控对象的三维可视化模型及场景，最后通过监控系统直观的展示出来，极大的提高了监控对象数据的表达能力和工作人员的工作效率。

该系统中实现了对加油机，油罐的监控，以及对加油站内的摄像头进行调取并显示，本文会讲解使用 HT 来搭建该系统的步骤，以及对场景中使用到的部分关键代码进行说明。

预览地址：

加油机监控效果

油罐监控效果

加油站切换效果

因为系统中对许多的加油站进行建模，所以系统中可以根据 url 地址的 stationCode 来区分不同的加油站，即 stationCode 为该加油站的唯一标识，当然该系统可以嵌入到任何第三方的系统中，HT 只需要第三方页面给一个 dom，就可以将该页面放到该 dom 中，例如上图 3d 场景，ht 可以通过 g3d.addToDOM(el) 来将 3d 场景的 dom append 到 el 这个 dom 下，g3d 为 ht 中 ht.graph3d.Graph3dView 的实例，具体可查看