得益于HTML5WebGL技术的成熟，工控管理可视化、数据可视化在技术上变得简单易行！工控设备管理效率、资源管理、风险管理等方面得到大幅提升，同时也有力响应了国家工业4.0计划！本案例展示的是一个基于HTML5WebGL技术的计量站3D可视化监控系统。本案例中宏观展示了一个油田现场的整体场景，然后点击进入内景，可以看到油田计量站内部的具体细节。同时可以看到各设备参数的当前状态。同样的功能组件复用性高，应用到其他场景会很方便！如下图为本案例运行动态图：本项目链接：【基于HTML5WebGL的计量站3D可视化监控系统Web组态工控应用】http://www.hightopo.com/demo/metering-station/这个场景主要有以下功能：1.点击可以来回切换场景；2.管道流动效果；3、数据面板的动态显示；确认功能需求后，即可开始实施。如下图，主要是油田的外景和内景。Exterior:Interior:SkillReserve本demo需要掌握HTforWeb的2D、3D相关技术。具体的技术参考资料可以到HTforWeb官网的图扑软件。实现功能1、默认视角在3D场景中，首先需要设置一个默认视角。当你重新打开页面时，会直接回到默认的视角，这是通过setFar、setEye和setCenter方法实现的。gv.setFar(100000);gv.setEye([1247,600,1972]);gv.setCenter([0,0,0]);2.视角限制由于3D场景的特点，如果不限制视角，会出现透模、翻底等现象，尤其是在这种有天空球效果的情况下。如果不限制视角，用户无限缩小，视角就会跑到天空球外，场景就会消失。这将非常尴尬！具体实现是通过setEye方法和setCenter方法控制场景的eye和center变量，放在gv.mp函数中。mp(listener,scope,ahead)添加自己的属性改变事件监听器//limiteyegv.mp(function(e){if(e.property==='eye'){if(gv.getEye()[1]<90){gv.getEye()[1]=90;}if(gv.getEye()[1]>1500){gv.getEye()[1]=1500;}if(gv.getEye()[0]>2400){gv.getEye()[0]=2400;}如果(gv.getEye()[0]<-2400){gv.getEye()[0]=-2400;}如果(gv.getEye()[2]>2500){gv.getEye()[2]=2500;}if(gv.getEye()[2]<-2400){gv.getEye()[2]=-2400;}}})3.点击切换场景通过mi添加一个交互事件监听器为点机交互模型绑定事件，通过e.kind判断点击事件，然后通过标签名。首先，点击时有放大效果和周围模型的透明效果，通过flyTo方法实现放大效果，其他模型通过setStyle方法放大后透明。具体代码如下：gv.mi(function(e){if(e.kind==='clickData'){for(vari=1;i<=2;i++){if(e.data.getTag()==='engineRoom'+i){//点击放大场景gv.flyTo(e.data,{animation:true,distance:500});//选择模型实体化e.data.setStyle('shape3d.transparent',false);e.data.setStyle('shape3d.opacity',1);//其他模型透明dm.each(data=>{if(data.getTag()!='engineRoom'+i){data.setStyle('shape3d.transparent',true);data.setStyle('shape3d.opacity',0.3);data.setStyle('all.transparent',true);data.setStyle('all.opacity',0.5);}})}}}})效果如下：场景放大，其他模型透明后，开始切换场景。场景切换的核心是通过gv.deserialize()将显示路径对应的场景反序列化，通过输入场景路径参数在回调函数中完成场景渲染显示。代码如下：gv.deserialize('scenes/oilfield.json',function(json,dm,gv,datas){if(json.title)document.title=json.title;if(json.a['json.background']){varbgJSON=json.a['json.background'];if(bgJSON.indexOf('displays')===0){varbgGv=newht.graph.GraphView();bgGv.deserialize(bgJSON);bgGv.addToDOM();graphView.addToDOM(bgGv.getView());}elseif(bgJSON.indexOf('scenes')===0){varbgG3d=newht.graph3d.Graph3dView();bgG3d.deserialize(bgJSON);bgG3d.addToDOM();graphView.addToDOM(bgG3d.getView());}graphView.handleScroll=function(){};}})但是在这之前，有个问题，即如何处理当前场景和通过反序列化渲染显示的场景之间的关系，如果不处理，会出现当前场景和要切换的场景重叠的问题，所以点击切换场景的时候,应先清空当前场景，为后面切换的场景腾出空间。所以需要在前面加一行代码：dm.clear();处理完之后，切换过去的效果就完成了，但是还有一个切换回来的功能。这个实现很简单，一个巧妙的trick，直接window。位置.重新加载（）；只需刷新页面即可。删除默认设置：functionjump(position3d){vartimer=setInterval(function(){clearInterval(timer)vardistance=ht.Default.getDistance(gv.getEye(),position3d);if(distance<=501)。){varhome=g2d.dm().getDataByTag('home');home.s('2d.visible',true);varline=g2d.dm().getDataByTag('line');('2d.visible',true);马克。清除()gv。反序列化（'场景/形状.json'，函数（json，dm，gv，数据）{if（json.title）document.title=json.title;if（json.a['json.background']）{varbgJSON=json.a['json.background'];if(bgJSON.indexOf('displays')===0){varbgGv=newht.graph.GraphView();bgGv.deserialize(bgJSON);bgGv。addToDOM();elseif(bgJSON.indexOf('scenes')===0){varbgG3d=newht.graph3d.Graph3dView();bgG3d.反序列化（bgJSON）；bgG3d.addToDOM();graphView.addToDOM(bgG3d.getView());}graphView.handleScroll=function(){};}})}},500)}我是放在跳转函数里面，然后在前面的点击事件中调用跳转函数，让代码更简洁效果如下图：4.最后两个函数管道流效果和动态数据面板实现起来很简单，所以我将它们放在一起。第一个效果如下图所示：流水线效果的核心是控制UV贴图的偏移，所以可以通过动画控制器startAnim控制UV贴图的偏移来实现。动画结束时，finishFunc中的回调函数可以实现动画循环。pipelineAnim(0.1)functionpipelineAnim(offset1){varanim1=ht.Default.startAnim({duration:2000,action:function(){offset1+=0.015;varpipelines=gv.dm().getDataByTag('pipeline');pipelines.setStyle('shape3d.uv.offset',[-offset1,0]);},finishFunc:function(){pipelineAnim(offset1);}})}数据面板通过定时器以固定的间隔循环它足以为执行分配一个随机数。在这里，真实数据是由随机数模拟的。在实践中，真实数据的动态变化是通过与后台对接来实现的。代码如下：setInterval(function(){for(vari=1;i<=4;i++){varpanels=gv.dm().getDataByTag('panel'+i);for(varj=1;j<=3;j++){if(panels.a('text'+j)!=undefined){varnum=parseFloat(Math.random()*(100-10+1)+10,10).toFixed(2);vartextJson={"参数名称":"出口温度","参数值":num,"参数单位":panels.a('text'+j)['参数单位']};panels.a('text'+j,textJson);}}}},1000)以上就是结论这就是今天给大家带来的控制案例，希望大家喜欢这个demo，在这个案例中得到一些启发
