一种基于WebGL的物联网社区数据监控方法技术

一种基于WebGL的物联网社区数据监控方法，通过建模软件建立物联网社区场景中的各种模型并搭建服务器，将数据与场景和网页连通，然后通过WebGL技术框架构建物联网社区3D场景，并将模型导入到场景中，通过数据对接与交互设计的方式，将物联网社区中的监测数据从数据库导入并显示在物联网社区3D场景中。社区管理人员可通过web端访问社区三维场景，查看物联网社区的监控数据与报警信息。本发明专利技术能够更加直观与方便地对物联网社区环境数据进行监控，使数据的对应关系更加的直观，更好保障社区监控数据的有效管理，可更好可视化定位物联网社区的报警区域，使社区管理更加安全。使社区管理更加安全。使社区管理更加安全。

【技术实现步骤摘要】
一种基于WebGL的物联网社区数据监控方法


[0001]本专利技术属于物联网数据监控领域，尤其涉及一种基于WebGL的物联网社区数据监控方法。

技术介绍

[0002]WebGL是一种3D绘图协议，可以为HTML5 Canvas提供硬件3D加速渲染，使得Web开发人员可以借助系统显卡来在浏览器上流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面。
[0003]物联网社区是新形势下社会管理创新的一种新模式,通过利用物联网、云计算、移动互联网等新一代信息技术,为社区居民提供一个安全、舒适、便利的现代化、智慧化生活环境。
[0004]现有的物联网社区的数据管理主要是通过收集社区中的传感器数据并上传到数据库中进行数据管理，数据报警方式也是通过后台数据管理中心对数据处理后判断是否大于阈值来预警，这样传统的数据监管方式普遍存在数据监控不够直观、数据处理不及时等问题，甚至会造成不必要的安全隐患。

技术实现思路

[0005]为了克服上述物联网社区的问题，本专利技术提出一种基于WebGL的物联网社区数据监控方法，通过搭建一个物联网社区3D场景，并通过WebGL技术渲染场景，并连接服务器和数据库，使得物联网社区管理人员很方便地在web端查看物联网数据和数据异常，相比于传统的物联网数据监控管理模式，本专利技术方法可更直观地在物联网社区3D场景中查看物联网数据和报警信息。
[0006]为了实现上述的目标，本专利技术采用的技术方案为：
[0007]一种基于WebGL的物联网社区数据监控方法，所述方法包括如下步骤：
[0008]步骤1：通过建模软件建立物联网社区场景中的模型，包括居民楼模型、树木和围墙模型；
[0009]步骤2：搭建web服务器，将实际场景与后台数据管理、前端网页呈现相关联；
[0010]步骤3：构建物联网社区3D场景，导入模型并创建组件；
[0011]步骤4：建立数据库，对物联网社区采集到的数据进行存储；
[0012]步骤5：数据对接与交互设计，将物联网社区中的监测数据从数据库导入并显示在物联网社区3D场景中；
[0013]步骤6：社区管理人员通过web端访问社区三维场景，查看物联网社区的监控数据与报警信息。
[0014]进一步，所述步骤1中，所用的建模软件为3Ds Max 2021，所要建立的物联网社区模型还包括运动设施模型以及小型公共设施模型。
[0015]再进一步，所述步骤2中，搭建的服务器类型是web服务器，负责从数据库中提取相关的数据并将提取到的物联网监控数据存储，再通过Ajax数据对接方式实现数据对接，通过接收客户端的Ajax请求并将请求数据发送给客户端。
[0016]更进一步，所述步骤3中，构建物联网社区3D场景通过Three.js框架，通过VS Code软件编写JavaScript代码并引入Three.js API，建立场景将步骤1中建立的物联网社区模型导入场景，建立渲染器渲染场景和模型并对接服务器。
[0017]所述步骤4中，使用的数据库为MySQL和阿里云。
[0018]所述步骤5中，数据对接与交互设计的实现过程为所述数据对接使用Ajax数据对接方式，通过浏览器的XMLHttpRequest对象向服务器发送HTTP请求，得到服务器返回的数据后进行数据处理，包括以下步骤：
[0019]1.创建XMLHttpRequest实例；
[0020]2.发出HTTP请求；
[0021]3.接收服务器传回的数据；
[0022]4.处理数据，更新页面。
[0023]所述交互设计的交互方式有：创建按钮、创建对话框、小地图控件、数据显示框或粒子动画。
[0024]所述步骤6中，访问物联网社区3D场景通过Firefox、Chrome、Safari或Edge浏览器等行，社区物联网数据显示方式通过在监测节点处创建的数据显示框显示，报警信息显示方式通过对话框与粒子动画的显示方式进行显示。
[0025]本专利技术的有益效果是：
[0026]1.通过WebGL技术构建一个物联网社区3D场景，可以更加直观与方便地对物联网社区环境数据进行监控，数据的对应关系也更加的直观，系统的访问速度变得更加快速，符合5G时代数据监控的特点。
[0027]2.可以有效地解决现有的物联网社区普遍存在数据监控信息不准确，数据丢失等问题，在一定程度上保障了社区监控数据的有效管理，可更加及时地定位物联网社区的报警区域，使社区管理更加安全。
附图说明
[0028]图1是数据监控方法的流程示意图。
具体实施方式
[0029]下面结合附图对本专利技术的较佳实施例进行详细阐述，以使本专利技术的优点和特征能更易于被本领域技术人员理解，从而对本专利技术的保护范围做出更为清楚明确的界定。
[0030]参照图1，一种基于WebGL的物联网社区数据监控方法，包括以下步骤：
[0031]步骤1：通过建模软件建立物联网社区场景中的各种模型；
[0032]所用的建模软件为3Ds Max 2021，所要建立的物联网社区模型包括居民楼模型、树木模型、围墙模型、运动设施模型以及社区中各种车辆、路灯等小型公共设施模型；模型建立完成后通过导出为.fbx格式用于在三维场景中加载。
[0033]步骤2：搭建服务器，将数据与场景和网页连通；
[0034]搭建的服务器类型是web服务器，负责从数据库中提取相关的数据并将提取到的物联网监控数据存储，再通过Ajax数据对接方式实现数据对接，通过接收客户端的Ajax请求并将请求数据发送给客户端；
[0035]步骤3：构建物联网社区3D场景，将模型导入到场景中，创建必要组件。
[0036]构建物联网社区3D场景通过Three.js这一WebGL框架，通过VS Code软件编写JavaScript代码并引入Three.js API，建立场景，将步骤1中建立的物联网社区模型导入场景，建立渲染器渲染场景和模型，并对接服务器；
[0037]步骤4：建立数据库，对物联网社区采集到的数据进行存储。使用的数据库为MySQL和阿里云；
[0038]步骤5：数据对接与交互设计，将物联网社区中的监测数据从数据库导入并显示在物联网社区3D场景中；
[0039]数据对接与交互设计的实现过程为，所述数据对接使用Ajax数据对接方式，通过浏览器的XMLHttpRequest对象向服务器发送HTTP请求，得到服务器返回的数据后进行数据处理。
[0040]包括以下步骤：
[0041]1.创建XMLHttpRequest实例；
[0042]2.发出HTTP请求；
[0043]3.接收服务器传回的数据；
[0044]4.处理数据，更新页面；
[0045]所述交互设计的交互方式有：创建按钮、创建对话框、小地图控本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于WebGL的物联网社区数据监控方法，其特征在于，所述方法包括如下步骤：步骤1：通过建模软件建立物联网社区场景中的模型，包括居民楼模型、树木和围墙模型；步骤2：搭建web服务器，将实际场景与后台数据管理、前端网页呈现相关联；步骤3：构建物联网社区3D场景，导入模型并创建组件；步骤4：建立数据库，对物联网社区采集到的数据进行存储；步骤5：数据对接与交互设计，将物联网社区中的监测数据从数据库导入并显示在物联网社区3D场景中；步骤6：社区管理人员通过web端访问社区三维场景，查看物联网社区的监控数据与报警信息。2.根据权利要求1所述的方法，其特征在于，所述步骤1中，所用的建模软件为3Ds Max 2021，所要建立的物联网社区模型还包括运动设施模型以及小型公共设施模型。3.根据权利要求1或2所述的方法，其特征在于，所述步骤2中，搭建的服务器类型是web服务器，负责从数据库中提取相关的数据并将提取到的物联网监控数据存储，再通过Ajax数据对接方式实现数据对接，通过接收客户端的Ajax请求并将请求数据发送给客户端。4.根据权利要求1或2所述的方法，其特征在于，所述步骤3中，构建物联网社区3D场景...

【专利技术属性】
技术研发人员：吴哲夫，史运旺，
申请(专利权)人：浙江工业大学，
类型：发明
国别省市：