新基建福音：智能楼宇可视化监控系统引领智能新时代背景受到广泛关注。目前，智能建筑视觉监控的主要优势包括：智能——智能建筑是一个生态系统，具有像人一样的感知、判断和控制能力。绿色化——绿色建筑实现能耗、产能、能源管理的绿色化，楼宇安防实现绿色监控。运营成本可控——基于可持续发展的要求，现代建筑和商业建筑需要运营50年以上。建筑物在运行过程中的能源消耗是巨大的。如何降低运营成本，让建筑在低碳环保的状态下健康运行。衣食住行往往缺一不可，建筑一直是社会发展进步的基础。以前的管理方式需要仔细划分每个模块的实施，但每个模块相对独立，在管理成本和人力投入上花费了大量精力。如今，在科技日益发展的道路上，我们经历了工业互联网的浪潮，顺应了5G新时代和新基建发展的潮流。工业4.0不仅势在必行，而且已经在逐步实施。通过技术开发经验的总结，我们可以在互联网上实现多种行业可视化系统监控和管理解决方案，智能建筑可视化系统也是如此。通过一整套串联起来的子系统，整理出一套可视化的在线管理系统，大大提高了管理能力，节省了人力投入。传统的智能建筑/楼宇自动化/楼宇安防/智慧园区往往使用BIM（建筑信息模型）软件，例如Autodesk的Revit或Bentley等建筑和工程软件，但这些BIM建模模型的数据往往过于臃肿，大部分详细信息的详细信息对楼宇自动化意义不大，反而影响了业界WebSCADA或Web配置监控的趋势，因此我们采用基于Hightopo的HTforWeb产品的轻量级HTML5/WebGL建模方案，实现快速建模，轻量级运行时，即使是移动端浏览器也能在3D可视化运维上取得不错的效果。本文讲解了智能楼宇的建模、页面动画效果的实现以及页面的主要功能点，帮助大家了解如何使用HT实现对智能楼宇的简单可视化监控，帮助大家了解智能楼宇和楼宇自动化。优势。预览地址：基于HTML5的WebGL楼宇自控3D可视化监控http://www.hightopo.com/demo/ht-smart-building/界面介绍及效果预览界面通过在3d上叠加2d图纸实现2d界面和3d场景场景2D界面的融合，通过自动布局的机制，实现了移动端和电脑端的响应式呈现。界面初始化效果界面初始化过程中的动画包括地面路径实时渲染、楼层展开、楼层发光扫描、楼层报警点动态水波、楼层监控数据面板实时变化等。监控界面效果监控界面包括：进楼人员实时监控，进楼人员头像、当前楼内人数等实时信息在面板上动态刷新。实时监控楼内电梯运行情况，系统显示电梯当前运行位置、是否运行等信息。实时监测建筑物特定楼层的监控数据，以柱状图的形式显示当前楼层特定信息的大小。楼宇管线实时监控，显示智慧楼宇所有管线的当前运行状态。智能建筑建模这个3D场景中的所有模型都是由线段和六面体构成的。与通过3dMax建模然后通过obj导入相比，场景中的三角面会少很多，也轻量化很多，比如场景中建筑物的地板，通过ht.Shape类绘制，记录了相关信息地板上的点和segments中ht.List类型的segment数组信息，segments表示点的连接方式，用来告诉ht.Shape使用点的信息来绘制等信息二次贝塞尔曲线或三次贝塞尔曲线或直线，具体说明请参考HTforWeb的【形状手册】。其他层的模型是一样的，只是y轴的值不同，通过几层的叠加就可以形成一个建筑物的轮廓。如果用户需要建设智慧园区、智慧楼宇等场景，可以使用这种基于HTML5/WebGL的建模方案，减少使用BIM建模模型的考虑。场景中的管道和背景地图路线由点和线组成，线或面的样式仅通过修改线的颜色粗细或贴图来修改。场景中的电梯是一个黄色的简单六面体，电梯线也只是一条线段，所以场景中的模型都是轻量级模型，使得3D场景渲染更流畅，提升了用户体验.场景关键动画代码分析1.地图路线动画代码分析通过上面智能建筑建模的分析，我们可以知道，线是为连接点而生成的，所以我们在绘制地图的路径时，可以得到所有的点信息，如果直线AB是地图中的一条线段，那么我们可以知道A点和B点的坐标，然后我们可以计算出AB线段上任意一点C的坐标，然后将A点和C点连接起来形成一条与AB线段位置和方向相同但比AB线段短的直线，然后绘制下一条路径动画，直到AC线段的长度等于AB线段的长度。下面是关键的伪代码展示：//currentIndex是当前路径绘制的点的索引//points是当前路径中所有点的信息currentPoints是绘制过程中点的信息//segments是当前路径中所有点的连接方式信息currentSegments是绘制过程中点的连接方式信息//即上述A点此时的信息letfromPoint=points[currentIndex];//即上述此时的B点信息lettoPoint=points[currentIndex+1];//AB方向的向量由AB的两个点组成letpointVector=newht.Math.Vector2(toPoint.x-fromPoint.x,toPoint.y-fromPoint.y);//记录向量的长度，用于判断AC是否大于等于ABletpointVectorLength=pointVector.length();让currentPoints=[],currentSegments=[];for(leti=0;ipointVectorLength){nextVectorLength=pointVectorLength;=currentIndex+1;}pointVector.setLength(nextVectorLength);//为点C的坐标tempPoint={x:pointVector.x+fromPoint.x,y:pointVector.y+fromPoint.y};//将C添加到currentPoints点坐标currentPoints.push(tempPoint);//为currentSegments添加C点连接方式，本程序中都是直线连接，所以值为2currentSegments.push(2);//roadNode是ht.Shape类，要重置ht.Shape类点信息roadNode.setPoints(currentPoints);//重置ht.Shape类点连接信息roadNode.setSegments(currentSegments);下面是动画代码执行流程图下面是绘制路线动画的截图：程序中通过向量的计算不断得到C点的坐标，当然C点的坐标也可以在其他方法2.水波和扫描动画代码分析通过修改HT提供的图标矩形框信息api来控制水波和扫描动画。通过调度不断修改图标矩形框的大小，产生水波和扫描动画效果。具体调度使用请参考HTforWeb的《调度手册》。下面是水波动画的关键伪代码：//waterWaveNodes所有水波节点letwaterWaveTask={interval:100,//指的是每隔100ms调用一次动作函数action:function(data){//判断waterWaveNodes是否包含dataif(waterWaveNodes.indexOf(data)>-1){//此时获取图标矩形框信息。circleRect是一个长度为4的数组，分别代表x,y,width,height。让circleRect=data.a('circleRect');if(circleRect){//通过修改高度来增加水波的大小letnextHeight=circleRect[3]+10;//最大高度为250if(nextHeight<250){//对应修改y的大小，y的增加为高度的一半circleRect[1]=circleRect[1]-5;circleRect[3]=nextHeight;data.a('circleRect',circleRect);data.a('borderColor','rgba(255,133,133,'+(1-circleRect[3]/250)+')');}else{data.a('circleRect',[-0.5,128,257,0]);data.a('borderColor','rgba(255,133,133)');}}else{data.a('circleRect',[-0.5,128,257,0]);}}}};//添加这个调度任务dm3d.addScheduleTask(waterWaveTask);下图是水波在2d:3中的截图。数值变化动画代码分析从程序截图中我们可以看到，数字在2d面板和3d场景中是动态变化的。这部分主要是通过数据绑定动态修改数值的大小。数据绑定可以参考HT的【数据绑定手册】forWeb，也是通过调度不断修改值的大小。在程序中，我封装了生成随机数的代码，用于每次生成随机数后绑定到对应的节点上。下面是2d面板改变数字的修改伪代码：//numNode(1-7)是2d面板中数字对应的节点//data.a('ht.value',number)是动态的修改attr上的ht.value信息，然后绘图会自动更新新赋值//getRandomValue封装了自己生成随机数的方法this.change2dNumTask={interval:1000,action:(data)=>{if(data===numNode1||data===numNode2){data.a('ht.value',util.getRandomValue([500,999],5));}如果（数据===numNode3||data===numNode4){data.s('text',util.getRandomValue([0,30],2)+'%');}if(data===numNode5){data.a('ht.value',util.getRandomValue([0,99999],5,3));}if(data===numNode6){data.a('ht.value',util.getRandomValue([0,100],2));}if(data===numNode7){data.a('ht.value',util.getRandomValue([0,100],2));}}};//添加定时任务dm2d.addScheduleTask(this.change2dNumTask);通过上面的代码我们可以知道，修改值就是通过修改节点的attr和style对象的一个??属性值来动态改变值。当然，2dpanel可能仍然隐藏在程序中。此时调度任务是不需要执行的，可以调用removeScheduleTask方法移除这个调度任务4.条形图高度动画代码分析在3D场景下，柱子也是六面体，只是渐变周围用map，顶面用纯色map构建，每个六面体都有高度信息。在HT中，node.getTall()用于获取当前六面体的高度值。根据上一节提到的数据绑定，我们可以在展示直方图的时候循环遍历所有的列。如果body节点的高度值命名为tall，则通过node.a('tall',tall)将该值存储到当前直方图节点的attr对象上，然后当列为时可以连续修改高度值初始化。动态改变高度。当高度值大于node.a('tall')时，表示当前列的高度初始化完成。以下是相关伪代码：charts.forEach((chart)=>{//将高度存储在attr!chart.a('tall')&&chart.a('tall',chart.getTall());//设置初始高度为0chart.setTall(0);});this.chartAnimteTask={interval:25,action:function(data){if(charts.indexOf(data)>-1){if(finishNum!==chartLength){if(data.getTall()!==data.a('tall')){//deep是每次增加的高度letnextTall=data.getTall()+deep;//获取初始高度lettall=data.a('tall');//判断下一个高度是否大于初始高度if(nextTall
