Software Engineering and Applications
Vol. 09  No. 01 ( 2020 ), Article ID: 34307 , 10 pages
10.12677/SEA.2020.91009

Design and Implementation of Intelligent Water Environment Monitoring Platform

Pengze Zhao, Wei Shen, Shaojie Huang, Fubin Ren, Mengke Wang

School of Information Science and Technology, Zhejiang Sci-Tech University, Hangzhou Zhejiang

Received: Jan. 31st, 2020; accepted: Feb. 18th, 2020; published: Feb. 25th, 2020

ABSTRACT

Water environment pollution has become a key concern in the developed coastal areas of eastern China. The deterioration of river water environment and the loss of water ecology have become important factors that seriously affect people’s normal production and life. The deteriorating water environment has also restricted the rapid and healthy development of the economy. The water environment is becoming more and more complex, and the test data is becoming larger and larger. This has also made the traditional water quality analysis method of face-to-face data more and more time-consuming and laborious to use, and the results are not good. Therefore, using data visualization to model the data and then analyze it has become more and more popular, and it has become an important means of water quality analysis. The water environment monitoring system based on Vue and Tornado designed in this paper, through the combination of GIS and data visualization technology, innovatively uses a multi-dimensional color rendering algorithm to build a water body model, and converts complex data into some simple and clear image transformations and color changes. It can quickly grasp the actual state of the water body, so that the water body can be more effectively treated, which not only greatly improves the work efficiency, but also provides more innovative solutions for the current water environment treatment.

Keywords:Tornado, Vue, GIS, Water Quality Testing, Water Environment Data Visualization

智能水环境监测平台的设计与实现

赵鹏泽,沈炜,黄少杰,任富彬,王梦珂

浙江理工大学信息学院,浙江 杭州

收稿日期:2020年1月31日;录用日期:2020年2月18日;发布日期:2020年2月25日

摘 要

水环境污染目前已经成为中国东部沿海发达地区重点关注的问题。河流水环境恶化与水生态丧失已成为严重影响人们正常生产生活的重要因素,不断恶化的水环境也制约了经济的快速健康发展。水体环境越来越复杂,测试的数据也越来越庞大,这也使得传统的直面数据的水质分析方法使用起来越来越费时费力,且效果欠佳。因此使用数据可视化的手段对数据进行建模而后分析的方法越来越受到大家的青睐,已然成为水质分析的重要手段。本文设计的基于Vue和Tornado的水环境监测系统,通过结合GIS与数据可视化技术,创新的采用多维度彩色渲染算法建立水体模型,将复杂数据转化为一些简洁明了的图像变换与颜色变化,通过系统可快速的掌握水体的现实状态,从而更有效的对水体进行治理,不仅大大的提升了工作的效率,也为当前的水环境的治理提供了更为创新的方案。

关键词 :Tornado,Vue,GIS,水质检测,水体环境数据可视化

Copyright © 2020 by author(s) and Hans Publishers Inc.

This work is licensed under the Creative Commons Attribution International License (CC BY).

http://creativecommons.org/licenses/by/4.0/

1. 引言

用水量随着世界人口的增长和生产的发展,也在日益增长,同时由于水体的污染导致的水质恶化,使得有限的水资源更加紧张。在这样的背景下,水体数据可视化分析软件可以快速反馈检测部门做水质的状况,为水治理提供决策依据 [1]。

对于水质检测工作者来说,水体数据复杂性和多样性是现在水体治理领域面临的重大挑战,表现在需处理的数据量大,维度多,来源多,还表现在数据获取的动态性、数据内容的相互矛盾、数据关系的异构与异质性等 [2]。数据可视化软件可以将这些杂乱无章的数据转化为易理解的图形图像,这样分析人员可以从简单的图像对比中快速地掌握水体的水质现状,分析水质变坏的原因,提出针对性的解决方案。

国内现已在使用的水体数据可视化分析与管理软件,都无法全面的满足我国当今水体监测的需求。在这样的市场背景下,本文研发的面向水体监测的可视化展示与管理软件,可用于协助分析水体的相关指标(如PH、浑浊度等)与管理水质检测项目的进行,达到对水体犹如进行CT检测般的效果。软件采用多种建模算法与颜色渲染算法,结合地理信息系统(Geo-Information System, GIS)与Web技术 [3],不仅可以协助企业与政府部门对水环境进行针对性的治理,还可以帮助其进行网络化的项目管理降低项目运行成本提高效率。

2. 需求分析

当前市面上的水环境监测系统的,主要依靠物联网传输数据和人工进行筛选,不仅工作效率低下,而且需要投入大量的人力物力。水环境监测系统面向大量的数据的传输与展示分析,不仅需要满足专业分析人员的分析,更要使得非专业人士能够快速了解水环境的变化情况,所以在本系统在需求分析阶段主要考虑的是流程简单化,系统轻量级,数据展示简单易分析。基于以上原因,智能水环境监测平台主要将系统划分为以下几个模块:数据导入,人员管理,项目管理,数据信息校对,数据展示。具体需求如图1所示,可归结为以下几点:

1) 系统人员设定,本系统设定了三类人员,分别是系统管理员、项目管理员、操作员,系统管理员具有最高权限,项目管理员具有对项目的创建管理权限,操作员负责数据的收集、上传和修正等工作。

2) 项目信息设定,由于考虑到项目过大的情况,或一天完不成的情况,可考虑将项目分为多个子项目,其中子项目的负责人由总项目负责人直接指定,且子项目的项目成员均来自于总项目。

3) 数据上传,数据上传为本平台的数据来源,由操作员从水质仪上导出数据后批量上传至平台。

4) 测量点定位展示与微调,上传的数据点信息中一部分会包含经纬度坐标,一部分不包含坐标信息,在展示测量点的过程中,对于没有经纬度坐标的数据点需要有操作人员手动标注,对于坐标显示不精确的测量点需要进行微调。

5) 数据展示,本平台根据需求分别提供折线图,平面图,断面图,雷达图,三维立体图展示等。

Figure 1. Analysis of overall system requirements

图1. 系统总体需求分析

3. 关键技术介绍

3.1. 基于GIS的地图定位展示

水质仪采集到的数据,需要结合GIS地图,实现采集点在Web地图(如百度地图)上标定 [4],从而为下一步实体建模打下基础。水质仪采集到的数据,本身具有GPS坐标,但该坐标是WGS84 (世界大地坐标系),与Web地图之间,一定存在偏差,这个偏差表现在两个方面,一方面是由于坐标系的不同,导致采集数据的经纬度与Web地图之间存在差异;另一方面是Web地图本身是加偏的(为了实现保密性),必须去掉这些偏差,实现准确定位。基于GIS的地图纠偏与展示如图2所示。

Figure 2. GIS-based map display and correction

图2. 基于GIS地图的展示与纠偏

GIS地图标定的核心代码如下所示:

var map = new BMap.Map(container);

map.centerAndZoom(new BMap.Point(locations[0].x, locations[0].y), 17); //创建地图

for (L in locations) {

var marker = new BMap.Marker(new BMap.Point(locations[L].x, locations[L].y)); //创建图标

map.addOverlay(marker);

}

3.2. 颜色渲染的可视化

可视化分析分别包含基于水体数据三维实体颜色渲染(形成四维图形),单指标水体平面差异图,多深度水体截面展示,多点水体断面展示等。

数据可视化的主要任务是为了通过颜色的差异展示出水体中不同指标好坏与差异程度。为了更加准确的表示颜色的差异程度,我们在选取颜色渐变的原色时,将颜色值(RGB)视为一个空间三维几何体 [5],在端点与棱上的中点中选取渐变原色,颜色的过度则通过面上的连线直接过度,这样可以解决渐变颜色的复杂变化问题 [5],也可以更清晰的展示出来。以RGB颜色为例,从原色为(0, 0, 0)渐变为(255, 127, 255)可以通过面上连线分别以多种方式渐变到达,这里选取其中的两种展示,分别是(0, 0, 0),(255, 0, 255),(255, 127, 255)和(0, 0, 0),(0, 0, 255),(255, 127, 255)。RGB颜色空间渐变过程如图3所示。

Figure 3. RGB color space gradient

图3. RGB颜色空间渐变

在选定了渐变原色与渐变过程后,本系统前端通过对地图的设置除去地图表面的覆盖物,人为设施等,通过固定的窗口截取与PC端窗口大小相同的图片传往后端,后端获取图片后,通过对图片像素点的分析,确定水面区域,在标点位置对周边水域遍历采用余弦插值法 [6] 进行渲染,插值公式如下:

(1)

(2)

(3)

(4)

其中,Fr、Fg和Fb是起始点的颜色,Er、Eg和Eb是终止点的颜色,T为透明度,P为归一化以后,插值点对应起点和终点的浮点数。渲染后的可视化图片如图4所示。

Figure 4. Color rendering visualization

图4. 颜色渲染可视化

3.3. 四维仿真建模

水体建模是在水质仪数据的基础上,通过离散点集插值拟合成为一个连续的三维实体 [7],基于相应数据对该三维实体进行颜色渲染,从而完成四维水体的建模。通过投影重构法对水体底面的构架三角形网面,然后求出底面点集的凸包 [8],对于凸包上的每一条边,其两个端点都为一列采集点(我们称之为样本条)的最深点,我们可以称这两列样本条相邻。对于这两列相邻的样本条,从某一列样本条的最深点出发,从下到上依次连接各样本点直到最浅的点,之后,连接相邻样本条的最浅点,再从上往下依次连接各样本点直到最深的点,再将两个最深点相连,就构成一个形似梯形的侧面 [9]。得到整体的水体模型如图5所示。

Figure 5. Water body model diagram

图5. 水体模型图

4. 系统总体设计

4.1. 平台结构设计

水环境监测系统的整体结构如图6所示。本系统由前端展示层,业务逻辑层和数据库结构组成。

1) 前端展示层:前端展示层主要通过Vue.js + Vuetify开发的,系统为了更好的展示数据引用了Echarts的图表,在UI设计中也加了dnd.js特效,第三方库的引入使得系统具有良好的展示能力。为使系统中的信息高效利用,团队使用了Vuex作为系统中数据的管理工具,使得前端开发更加高效。

2) 业务逻辑层:本系统的业务逻辑主要分为以下几块,分别是:项目管理,人员管理,数据管理与展示,其中数据的管理与展示是本系统的核心业务,项目管理主要负责生成和维护日常项目,人员管理主要是对项目中的人员进行分配,其中人员的角色分别为:admin、项目管理员、操作员。数据的管理和展示业务则是对上传的水质数据进行合理的管理与展示。

3) 数据库结构:水环境监测系统的将上传的所有数据存放在MySQL数据库中,MySQL是当前中小企业最喜欢的关系型数据库管理系统之一,因其在数据处理上的优秀性能,所有在WEB系统方面使用尤为广泛。由于团队担心随着数据的累积,数据的传输效率以及并发的问题必将成为系统的瓶颈,所以团队采用Redis作为缓存,将符合特点条件的数据信息存放在Redis中,通过设置命中的时效性来对其中缓存的数据实时维护更新,提高数据传输和系统响应的速度。

Figure 6. System overall architecture diagram

图6. 系统整体架构图

4.2. 开发环境介绍

本系统后端基于Tornado技术开发,Tornado本身是一个轻量级的web框架,在处理高网络流量的请求时也可以发挥出出色的性能,而且还可以用于各种应用程序和工具。我们项目开发使用的是Anaconda下的python3环境编写的Tornado程序。Anaconda是一个开源的包、环境管理器,可以用于在同一个机器上安装不同版本的软件包及其依赖,并能够在不同的环境之间切换。项目开发时服务器都部署在本地,一般部署的服务器指定端口号为80,本地服务器连接地址为http:localhost:8080,这里的端口号是8080,在调试过程中,如遇端口号被占用的情况下,可以自定义其他端口。前端页面使用的是Vue框架去管理js、css、html等文件,安装Vue时本地必须先装上Node.js环境,Vue是npm下的开源包,需通过Node环境下载。团队使用Vue官方CLI创建Vue项目,使用webpack管理依赖包同时将项目运行在本地,端口8082。

系统在本地开发时数据的请求流程是先请求基于Mock管理平台YApi,该平台为本地Node服务器搭建,可直接请求,需要预先输入API的URL、参数、JSON数据等。如果某个接口已经完成开发,可以在YApi平台上点击取消该接口的链接,然后系统可以通过API直接请求后端服务。本系统通过第三方库Axios请求后端服务,使用ES6的Async/Await处理异步,系统开发时本地部署,所以前端不需要配置Nginx服务器,部署到云服务器上后需要开启Nginx配置代理请求服务。

4.3. 关键技术系统实现

本系统针对水质仪采集到的数据进行水体环境的实体建模,以可视化的方法在Web页面上进行图形化展示,直观地表现水体的各类数据,从而对水体水质能够进行网络化科学而直观的分析。

4.3.1. 数据保存与操作

用户上传数据后系统记录用户ID与文件id,将文件中的数据读取到数据库中,前端可展示出文件中的数据,如遇到错误或者不准确的数据,用户可自行删除该数据行。

4.3.2. GIS标定与展示

用户上传数据的文件中,有些文件具有GPS的定位信息,也有的文件不具备定位信息,所以在系统使用GIS进行标定时必须确定两个信息,文件中是否具有GPS定位信息和定位信息如何纠偏。本文中的系统使用百度地图开发包,在上传数据是用户可根据其他定位工具获取当然GPS信息进行手动输入,获取到大概位置时可展示在地图中进行纠偏操作。

纠偏操作分别包括两个步骤,分别是坐标转换和数据微调纠偏。第一个步骤可以通过相应地图提供的API来实现,如百度地图可以通过百度地图提供的转换坐标API来实现WGS84向百度地图坐标的转换;第二个步骤,因为在特定区域,坐标加偏方式是相同的,所以可以通过经验公式,进行自动纠偏。例如,太湖西岸经度和纬度加偏值大约为0.011107013599996662和0.004045467299999217。虽然这样的经验纠偏方式可以解决大部分的标定问题,但有时还可能存在标定不准确的现象,所以此时需要人工进行修正,人工修正只需要一次就可以得到区域内所有采样点的偏差,因此能够快速得到满意的结果。

4.3.3. 平面渲染图实现

平面图主要是为展示单指标在水域中的差异程度。平面图的渲染技术使用的是颜色差值,在系统实现过程中主要依靠对图片的处理完成颜色的渲染。用户选取数据点和水域后,前端将一系列信息传往后端,包含其中视图框大小,地图大小,地图中心点坐标,地图左上角及右下角经纬度坐标,Zoom等。后端通过这些数据截取与前端视图框同样大小的地图截图,由于地图具有覆盖层数据,需要通过自定义设置样式清除地图覆盖物,核心代码如下:

map.setMapStyle({

styleJson: [{

featureType: road,

elementType: all,

stylers: {

color: #ffffff,

visibility: off

}

},

{

featureType: building,

elementType: all,

stylers: {

visibility: off

}

},

{

featureType: poilabel,

elementType: all,

stylers: {

visibility: off

}

},

{

featureType: manmade,

elementType: all,

stylers: {

visibility: off

}

},

]

});

后端截取图片后根据地图上水域的RGB值进行逐行遍历和填充颜色,但如果单纯的扫描水域可能会导致其他无效水域被渲染颜色,所以经过讨论后团队采用的是扩散扫描法,此算法将从其中一个样本点出发,遍历这个像素点的上下左右点,若为蓝色,则进行渲染,并将此点加入未扫描的队列,之后遍历未扫描队列像素点的上下左右点,判断颜色进行渲染,如此循环,直至未扫描队列为空,渲染完毕。然后将渲染后的图片传到前端展示。

4.3.4. 断面图

断面图是为了了解不同水环境中的地势环境和水质情况,断面图是有用户选取不同的测量点,将不同的测量点通过选取的顺序连接,然后将所有被选中的点拉成一条直线,按数据点中的水深和单个指标绘制出水域中地形和水质的大体状况。前端负责将选中的点集以顺序排列的方式传往后端,后端根据数据点最中的水深,首先绘制水体的底部断面,再通过颜色扩散渲染方法,根据某一指标逐步的渲染水域信息,最后将渲染的图片传回前端。渲染的断面图如图7所示。

Figure 7. Water body section

图7. 水体断面图

4.3.5. 四维水体图

四维水体的渲染是本系统最为复杂的工作,不仅要考虑大量的数据传输,还要考虑到数据的离散性,水体的全貌与水质的信息,团队采用了Echarts散点建模。面对大量的数据传输,团队优先考虑异步接口分批传输,但性能上并不理想,传输时间过长,接口如果调用失败则导致图形渲染失败等问题出现,由于数据的特殊性,团队选用字符串来进行数据的传输,既避免了多个接口连掉带来的性能消耗,也加快了传输的效率。

Figure 8. Four-dimensional water body map

图8. 四维水体图

由于生成大量数据点需要经过构建水体底部三角网面、细化网面、分割水域、插值计算水质数据等操作,生成数据点的速度比较慢。如果用户只是改变希望展示的水深、水质参数,每次生成散点图都重新计算数据点会花费大量不必要的时间。因此,定义两个字符串a和b,初始赋值均为空。当需要生成3D散点图时,将用户所选数据条的id以字符串的形式存入a中,每个id中间用“,”分隔,并判断字符串a、b是否相等。如果相等,则无需重新计算数据点,直接生成散点图。如果a、b不相等,那么先令b = a,然后计算新的数据点,以新的数据点为基础去生成水体图。这样,当用户选择的数据条不变时,无需重新计算数据点。

系统选用视觉映射组件visualMap对散点图进行颜色渲染。将visualMap.min、visualMax.max分别定义为所有数据点对应水质数据的最小、最大值,设置visualMap.inRange.color为['#1710c0', '#0b9df0', '#00fea8', '#00ff0d', '#f5f811', '#f09a09', '#fe0300'],使各散点根据其所对应的水质数据进行了渐变的颜色渲染。四维水体图如图8所示。

5. 结束语

智能水环境监平台使用Tornado和Vue框架不仅满足了用户的需求,也填补了水环境数据可视化领域的空白,团队在开发时考虑了诸多当前互联网产品所可能出现问题,如多端登陆,屏幕自适应等,所以本系统同时也可以支持多端的访问,兼容多款主流浏览器访问。系统考虑数据的传输性能问题和安全问题,前端使用Nginx服务器保证请求的负载均衡,后端使用Tornado框架并充分利用框架的非阻塞性和自带的安全机制,不仅保证了系统性能上的要求,同时也使代码更加轻量化。智能水环境监测平台不仅具有突出的性能优势和友好大方的界面,更是将理论与实践完美结合,为国内水体监测分析数据可视化提供了新的方向,以良好的视觉效果展示水质信息,使得水质分析工作更加的高效便捷,相信智能水环境监测平台在以后的水体监测工作中使用会越来越广泛。

文章引用

赵鹏泽,沈 炜,黄少杰,任富彬,王梦珂. 智能水环境监测平台的设计与实现
Design and Implementation of Intelligent Water Environment Monitoring Platform[J]. 软件工程与应用, 2020, 09(01): 72-81. https://doi.org/10.12677/SEA.2020.91009

参考文献

  1. 1. 彭兆亮, 胡维平. 基于水生态改善的太湖分区分时动态水质目标制定方法[J]. 湖泊科学, 2019, 31(4): 988-997.

  2. 2. 郭晶, 王丑明, 黄代中, 等. 洞庭湖水污染特征及水质评价[J]. 环境化学, 2019, 38(1): 152-160.

  3. 3. Petch, J. (2019) GIS, Organisations and People: A Socio-Technical Approach. CRC Press, London.

  4. 4. 李亚龙, 何琳, 王伟, 等. 百度地图位置解析技术在地震应急基础数据库的应用[J]. 地震地磁观测与研究, 2019, 40(1): 139-144.

  5. 5. 郭丽. 基于RGB颜色空间的彩色图像灰度化算法研究[D]: [硕士学位论文]. 西安: 陕西师范大学, 2017.

  6. 6. 高李宋, 吴文权, 詹咏. 颜色渐变的算法研究[J]. 上海理工大学学报, 2004, 26(3): 30-34.

  7. 7. 陈明晶. 基于离散点的空间复杂实体三维建模[D]: [硕士学位论文]. 昆明: 昆明理工大学, 2017.

  8. 8. 邵铁政, 李世森. 凸包内空间散乱点集Delaunay四面体角度剖分算法[J]. 水道港口, 2013, 34(1): 95-98.

  9. 9. 韩李涛, 范克楠. 三维地形颜色渐变渲染的光滑过渡方法研究[J]. 地球信息科学学报, 2015, 17(1): 31-36.

期刊菜单