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

一种基于webgl的物联网社区数据监控方法
技术领域
1.本发明属于物联网数据监控领域，尤其涉及一种基于webgl的物联网社区数据监控方法。


背景技术：

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


技术实现要素：

5.为了克服上述物联网社区的问题，本发明提出一种基于webgl的物联网社区数据监控方法，通过搭建一个物联网社区3d场景，并通过webgl技术渲染场景，并连接服务器和数据库，使得物联网社区管理人员很方便地在web端查看物联网数据和数据异常，相比于传统的物联网数据监控管理模式，本发明方法可更直观地在物联网社区3d场景中查看物联网数据和报警信息。
6.为了实现上述的目标，本发明采用的技术方案为：
7.一种基于webgl的物联网社区数据监控方法，所述方法包括如下步骤：
8.步骤1：通过建模软件建立物联网社区场景中的模型，包括居民楼模型、树木和围墙模型；
9.步骤2：搭建web服务器，将实际场景与后台数据管理、前端网页呈现相关联；
10.步骤3：构建物联网社区3d场景，导入模型并创建组件；
11.步骤4：建立数据库，对物联网社区采集到的数据进行存储；
12.步骤5：数据对接与交互设计，将物联网社区中的监测数据从数据库导入并显示在物联网社区3d场景中；
13.步骤6：社区管理人员通过web端访问社区三维场景，查看物联网社区的监控数据与报警信息。
14.进一步，所述步骤1中，所用的建模软件为3ds max 2021，所要建立的物联网社区模型还包括运动设施模型以及小型公共设施模型。
15.再进一步，所述步骤2中，搭建的服务器类型是web服务器，负责从数据库中提取相关的数据并将提取到的物联网监控数据存储，再通过ajax数据对接方式实现数据对接，通过接收客户端的ajax请求并将请求数据发送给客户端。
16.更进一步，所述步骤3中，构建物联网社区3d场景通过three.js框架，通过vs code软件编写javascript代码并引入three.js api，建立场景将步骤1中建立的物联网社区模型导入场景，建立渲染器渲染场景和模型并对接服务器。
17.所述步骤4中，使用的数据库为mysql和阿里云。
18.所述步骤5中，数据对接与交互设计的实现过程为所述数据对接使用ajax数据对接方式，通过浏览器的xmlhttprequest对象向服务器发送http请求，得到服务器返回的数据后进行数据处理，包括以下步骤：
19.1.创建xmlhttprequest实例；
20.2.发出http请求；
21.3.接收服务器传回的数据；
22.4.处理数据，更新页面。
23.所述交互设计的交互方式有：创建按钮、创建对话框、小地图控件、数据显示框或粒子动画。
24.所述步骤6中，访问物联网社区3d场景通过firefox、chrome、safari或edge浏览器等行，社区物联网数据显示方式通过在监测节点处创建的数据显示框显示，报警信息显示方式通过对话框与粒子动画的显示方式进行显示。
25.本发明的有益效果是：
26.1.通过webgl技术构建一个物联网社区3d场景，可以更加直观与方便地对物联网社区环境数据进行监控，数据的对应关系也更加的直观，系统的访问速度变得更加快速，符合5g时代数据监控的特点。
27.2.可以有效地解决现有的物联网社区普遍存在数据监控信息不准确，数据丢失等问题，在一定程度上保障了社区监控数据的有效管理，可更加及时地定位物联网社区的报警区域，使社区管理更加安全。
附图说明
28.图1是数据监控方法的流程示意图。
具体实施方式
29.下面结合附图对本发明的较佳实施例进行详细阐述，以使本发明的优点和特征能更易于被本领域技术人员理解，从而对本发明的保护范围做出更为清楚明确的界定。
30.参照图1，一种基于webgl的物联网社区数据监控方法，包括以下步骤：
31.步骤1：通过建模软件建立物联网社区场景中的各种模型；
32.所用的建模软件为3ds max 2021，所要建立的物联网社区模型包括居民楼模型、树木模型、围墙模型、运动设施模型以及社区中各种车辆、路灯等小型公共设施模型；模型建立完成后通过导出为.fbx格式用于在三维场景中加载。
33.步骤2：搭建服务器，将数据与场景和网页连通；
34.搭建的服务器类型是web服务器，负责从数据库中提取相关的数据并将提取到的物联网监控数据存储，再通过ajax数据对接方式实现数据对接，通过接收客户端的ajax请求并将请求数据发送给客户端；
35.步骤3：构建物联网社区3d场景，将模型导入到场景中，创建必要组件。
36.构建物联网社区3d场景通过three.js这一webgl框架，通过vs code软件编写javascript代码并引入three.js api，建立场景，将步骤1中建立的物联网社区模型导入场景，建立渲染器渲染场景和模型，并对接服务器；
37.步骤4：建立数据库，对物联网社区采集到的数据进行存储。使用的数据库为mysql和阿里云；
38.步骤5：数据对接与交互设计，将物联网社区中的监测数据从数据库导入并显示在物联网社区3d场景中；
39.数据对接与交互设计的实现过程为，所述数据对接使用ajax数据对接方式，通过浏览器的xmlhttprequest对象向服务器发送http请求，得到服务器返回的数据后进行数据处理。
40.包括以下步骤：
41.1.创建xmlhttprequest实例；
42.2.发出http请求；
43.3.接收服务器传回的数据；
44.4.处理数据，更新页面；
45.所述交互设计的交互方式有：创建按钮、创建对话框、小地图控件、数据显示框、粒子动画等。
46.步骤6：社区管理人员通过web端访问社区三维场景，查看物联网社区的监控数据与报警信息；
47.访问物联网社区3d场景通过firefox、chrome、safari、edge浏览器等进行，社区物联网数据显示方式通过在监测节点处创建的数据显示框显示，报警信息显示方式通过对话框与粒子动画的显示方式进行显示。
48.本实施例物联网数据的具体显示方式是：通过点击浏览器访问web端的物联网3d场景，通过点击ui界面的显示数据按钮显示物联网社区内监测到的真实数据，拖拽鼠标或者滑动屏幕调整视角查看更多监控区域的数据信息，数据超过报警阈值时调出对话框显示报警信息，同时在报警区域出现报警示意动画。
49.以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。