前言智慧灯杆管理系统作为智慧城市的重要组成部分，利用信息化、数字化手段，对各种对象进行监控，如路灯和城市景观照明。集数据采集和处理于一体，为城市管理者进行城市管理和科学决策提供了有力手段。智慧灯杆管理系统是针对路灯智能化管理的综合系统。可对范围内所有路灯进行集中控制，监控实时数据，智能分析异常，故障报警，杜绝设备老化和损耗带来的问题。可实现路灯管网等设施配置信息化管理，满足后续用户升级需求。针对这种情况，我们实现了基于HTforWeb的智慧灯杆管理系统，通过友好的3D可视化人机交互界面展示数据。 智慧铁塔作为信息通信技术与传统城市公共基础设施融合的典范，集“融合、共享、智能、和谐”四大特征于一体，被认为是最具发展前景的新型公共基础设施.受到世界多个国家的广泛关注，并已开工建设。目前，我国智能铁塔的建设还处于起步阶段。但在新型智慧城市建设和5G商用的推动下，相关激励政策相继出台，发展正在加速。预计在未来两到三年内，将在我国实现。突破性增长。 （业务应用实例） （多杆合一）系统分析1.通信业务 智慧铁塔运营通信连接点，可通过无线或有线方式对外扩展，提供多种业务服务，包括无线基站、物联网、边缘计算、公共WIFI和光传输等。此外，智能塔的覆盖范围广，距离连接对象近。适合作为Internet系统的承载。通过光纤传输网络、2G/3G/4G/5G、NB-IoT、Wi-Fi、PLC、ZigBee等多种连接方式连接无处不在的智能终端，统一管理、接收、融合、传输随时随地获取城市各领域信息，提高城市智能化水平和管理效率。2.公共安全 智慧铁塔广泛分布于城市高速公路、街道和公园，对人口密集区域有很好的渗透。通过在杆上部署摄像头和紧急求救按钮，与远程监控系统联网，已经成为城市安防场景中不可或缺的重要组成部分。通过部署摄像头，监控车辆和人员的黑白名单，通过人脸识别/车牌识别/行为识别等技术识别风险因素；人员提供具体位置信息，通过摄像头远程快速判断现场情况，为各种突发事件节省时间。3、智能照明 随着物联网技术和LED技术的蓬勃发展，物联网+LED的完美结合，市政照明智能化转型进入快车道。智慧照明通过信息传感设备将每盏灯接入互联网，实现按需照明和批量灯的精细化管理，实现节能减排、高效运维。通过单灯控制、集中控制器、照度传感器、多功能电表等和智慧塔台平台，实现路灯实时/分组开启、关闭、调光操作；循环打开和关闭操作；远程监控运行状态和运行参数以及运行异常等。4.环境监测 基于智慧铁塔的气象环境监测点具有大范围密集分布和覆盖的特点。将采集到的数据通过云平台进行大数据分析，可结合环境数据的本地和远程推送服务，提供空气质量、温湿度、风速风向、噪声、电磁辐射、和光照强度；结合视频监控系统，还可以提供便捷的环境综合服务；它还可以与部署在智能塔上的LED屏幕结合，实时发布信息。实现城市环境和天气的智能监测、预警，为环保部门改善城市环境提供数据参考。5、智慧交通 智慧塔杆由于点多、距离近的优势，更有利于道路和车辆信息的采集和管理。通过安装高位摄像头，可以满足交通部门管理超速、违章停车等违法违规行为的需要。此外，还可以结合车牌识别，完成智能道路停车场景的搭建；通过交通流量检测器，实时采集和传输交通状态信息，如交通流量、车道平均速度、车道拥堵情况等；通过智慧铁塔，还可以提升道路智能化水平，比如可以监测道路积水、故障信息，实现更好的车路协同。6、信息发布 智慧铁塔具有贴近人流、成片、连线的特点。信息通过挂载装置发布时，具有传播广、效果高、影响大的效果。当发生火灾、地震等突发事件时，可利用多媒体信息发布系统进行紧急广播和警示灯提示，通知公众安全疏散；同时，结合LED屏还可以发布政府信息、交通信息和商业广告；配备多媒体交互终端的智能塔还可以通过传感器实现人机交互通信。7、能源业务 基于智慧塔杆的能源，不仅可以满足多功能塔杆各种设备功能的正常运行，还可以对外提供多种供电和备用服务。可提供的服务包括但不限于：充电桩、USB接口充电、信号灯、相机后备电源、无人机充电等，用户还可以通过手机APP实现各类业务预约、查询。条件允许时，智能塔杆可搭载太阳能电池板或风力发电设备，实现城市绿色能源。代码实现 HTforWeb拥有完整的基于HTML5的图形界面组件库，可以轻松搭建跨桌面端和移动端的现代智慧灯杆管理系统。独特的WebGL层抽象将Model-View-Presenter（MVP）的设计模型扩展到3D图形领域。下面是结合2D和3D的界面处理：//2D部分//隐藏选中的边框gv.getSelectWidth=function(){return0};//禁止图元移动gv.setMovableFunc(function(){returnfalse});//禁止鼠标缩放gv.handleScroll=function(){};//禁止双指缩放gvundertouch.handlePinch=function(){};//禁止平移gv.setPannable(false);//禁止框选gv.setRectSelectable(false);//隐藏滚动条gv.setScrollBarVisible(false);//全局设置右键菜单Disablewindow.document.oncontextmenu=function(){returnfalse};//3Dpart//禁用拖动g3d.setMovableFunc(function(){returnfalse});//隐藏选中的框架g3d.getWireframe=function(d){d.s('wf.visible',false)};//设置眼睛g3d.setEye([-8812,17520,14341]);//设置中心点g3d.setCenter([-6217,0,28341]);//设置远位置g3d.setFar(5000000);//设置附近位置g3d.setNear(1);//设置交互限制g3d.setInteractors([newht.graph3d.MapInteractor(g3d)]); 对于智慧灯杆的数据展示，我们应用了3D建模，让路灯、智慧城市的展示更加立体、生动。数据板采用二维板形式，使数据更直观。这里还要注意，我们在操作2D界面时避免了点击穿透的问题：constdiv2d=gv.getView();div2d.addEventListener(this.getWheelEventName(div2d),handler);//在一个HTMLElement上，它可能支持一个或以下三个事件中的两个，但实际回调只会回调一类事件，会先回调标准事件。触发标准事件后，不会触发兼容事件。getWheelEventName(element){if('onwheel'inelement){//标准事件返回'wheel';}elseif(document.onmousewheel!==undefined){//通用旧事件return'mousewheel';}else{//旧的Firefox事件返回'DOMMouseScroll';}};varhandler=function(e){if(gv.getDataAt(e)){//阻止默认事件e.preventDefault();//防止事件冒泡e.stopPropagation();}};gv.getView().addEventListener('mousedown',handler);gv.getView().addEventListener('touchstart',handler); 下第一个动画效果是开枪的移动效果。我们使用moveCamera()方法传递eye和center的目标值以及动画参数即可实现：g3d.moveCamera([-12402,12910,52250],[-6822,0,35987],{duration:3000}); 调整相机后，通过事件监听进一步增加3D场景中的所有交互效果：g3d.mi(function(e){vardata=e.data,kind=e.kind;//双击背景if(kind==='doubleClickBackground'){//恢复视角g3d.moveCamera([-12402,12910,52250],[-6822,0,35987],{duration:1000});}//双击模型elseif(kind==='doubleClickData'){//switch2Deventbus.emit('switch2D');}//进入模型elseif(kind==='onEnter'){g3d.getView().style.cursor='pointer';}//移出模型elseif(kind==='onLeave'){g3d.getView().style.cursor='default';}//点击模型elseif(kind==='clickData'){//选中状态不改变颜色data.s('select.brightness',1);//放大视角g3d.flyTo(data,{animation:{duration:1000},distance:3500});}}); 其中，我们添加了双击背景还原视角，鼠标移进移出悬停，点击灯杆放大，双击灯杆切换flyTo()2D接口的方法也是一种移动相机的方法，其用法类似于上面提到的moveCamera()。 关于数据变化，我们以能耗面板为例。它作为billboard类型存在于3D场景中，其中变化的文字是我们在2D编辑器中预先绑定的属性。这里我们只提供绑定随机数作为参考。在实际应用中，我们可以通过建立网络链接获取数据，通过数据库获取数据，通过硬件串口获取数据等，这里不再赘述。以下是代码实现：//数据面板vardataPanel=dm.getDataByTag('dataPanel');setInterval(function(){dataPanel.a('电力',getRandomNum(1000,8000));dataPanel.a('光照',getRandomNum(2000,6000));dataPanel.a('时间',getRandomNum(3000,4000));},1000); 切换到2D界面后，还有一个3D小场景，为了查看设备的局部和宏，交互方式和大的一样，包括放大和还原等效果，并且会单击菜单时切换。关于这些2D面板的切换，我们在制作图标的时候也对它们进行了细致的封装，保证当通过鼠标事件点击面板中的特定元素时，可以切换其中包含的模块信息。使用后退按钮控制隐藏2D部分：//switch2Deventbus.on('switch2D',function(){ //背景显示background.s('2d.visible',true); //标题栏显示title.s('2d.visible',true); //小场景显示scene.s('2d.visible',true); //其他面板为hiddenfor(vari=1;i<8;i++){dm.getDataByTag('panel'+i).s('2d.visible',false);};dm.getDataByTag('panel'+title.a('state')).s('2d.visible',true);});//switch3Deventbus.on('switch3D',function(){ //背景隐藏background.s('2d.visible',false); //隐藏标题栏title.s('2d.visible',false); //隐藏小场景scene.s('2d.visible',false); //没有其他隐藏面板for(vari=1;i<8;i++){dm.getDataByTag('panel'+i).s('2d.visible',false);};});总结 至此，我们的智慧灯杆管理系统就完成了。建设智慧城市是未来科技发展的必由之路。我国目前是发展中国家，正处于科技强国的关键时刻。它面临着劳动力成本上升、原材料价格波动、贸易竞争加剧等问题。迫切需要提高效率和降低生产成本。只有坚定不移推进工业互联网落地，加快更多企业数字化转型、智能化转型，才能在全球竞争中立于不败之地。可视化作为智能数字化的最后一环，让复杂抽象的数据真正可感知，帮助决策者发现规律，洞察未来，为企业提速增效。 系统的完成离不开HTforWeb平台的支持。丰富完善的图标库资源，让组态设计更加简单方便。广泛应用于电信网络拓扑和设备管理，以及电力、燃气等工业自??动化（HMI/SCADA）领域。同时，HT的成功和完善离不开广大用户的支持。各行各业提供的专业需求，使其日趋完善。欢迎更多大佬加入，让数据可视化无限可能。 2019我们还更新了数百个工业互联网2D/3D可视化案例合集，在这里你可以找到很多新奇的例子，发现不一样的工业互联网：《分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇》。 欢迎大家浏览更多有科技感的demo，学习制作炫酷的效果和先进的创意，我会持续更新的~~
