当前位置：首页 > news >正文

空间信息可视化——WebGIS前端实例（二）

news 来源：原创 2025/8/29 0:44:17

技术栈：原生HTML

源代码：CUGLin/WebGIS: This is a project of Spatial information visualization

5 水质情况实时监测预警系统

5.1 系统设计思想

水安全是涉及国家长治久安的大事。多年来，为相应国家战略，诸多地理信息领域的优秀学者们挺身而出。庞爱萍等通过多时空尺度农业用水安全压力指数为农业用水安全评价提供新的思路和方法[2]，闻豪等基于基于水贫困指数WPI计算模型研究区域经济发展和水安全的多元耦合关系[3]，张城等基于VIC模型量化了渭河流域水资源供需平衡关系[4]，邓捷铭等则给出了区域水安全评价指标体系。[5]GIS以其强大的分析和构建能力，在水资源安全领域的应用方兴未艾。

基于这样的时代背景，水质情况实时监测预警系统的设计思想应运而生，旨在依托先进的传感器技术、物联网技术和数据分析手段，全面、准确地监测我国各水域的水质状况，并实时发出预警信息。

5.2 贫困县数据处理

5.2.1 数据获取

本系统旨在进行水质情况的检测，主要数据来源于中国环境检测总站的数据集。（网址：监测报告-中国环境监测总站）此外，还需要一些矢量边界数据，该数据和4.2.1中相同，来源于阿里云的地图选择器，按照需求下载对应区域的GeoJSON数据即可。（阿里云选择器网址：DataV.GeoAtlas地理小工具系列）

5.2.2 数据处理

限于笔者经历和篇幅，这里并未对整个中国的地表水环境全部进行整理入库，而只是摘取了其中较为重要且可视化效果效果较好的数据进行整理和应用，同时清洗了部分可能出现问题的数据，最终得到了完善且便于应用的数据集。

本系统主要应用到的数据如表5.2-1所示。

表5.2-1 应用数据表

数据名称	数据类型	数据来源
矢量边界数据	GeoJSON	阿里云地图选择器
水质情况数据	JavaScript	中国环境检测总站

5.3 系统设计

5.3.1 总体设计

本系统的项目文件夹为水质情况实时监测预警系统，项目包含3个文件夹和index文件，分别是CSS文件夹，负责存放有关的CSS样式文件；Data文件夹，负责存放项目中所使用到的数据文件；JS文件夹，负责存放项目中所使用到JavaScript文件。同时在主文件夹中还包含index.html文件，该文件是项目的入口HTML文件，程序从此处开始进入并运行。项目结构图如图5.3-1所示。

图5.3-1 项目结构

项目大致流程主要分为数据获取、输出处理、程序编写、系统测试四大主要部分。如图5.3-2所示。

图5.3-2 项目流程图

5.3.2 界面设计

系统界面主要由两个部分组成：地图部分、图表部分。地图部分主要用于显示基础地图，表达出地域的位置信息及底图附带的其他包含信息，图表部分主要负责表达出不同年份不同地域的，交互部分主要负责进行页面的交互，实现地图和图表的动态切换，此外还可以监听鼠标事件实现动态交互功能。

5.3.3 逻辑设计

逻辑设计主要涉及四大方面的内容：数据读取、地图制作、表格绘制、交互响应。数据读取应当是页面加载后最先完成的部分，主要负责利用数据读取库从文件中读取相应的数据存储为JavaScrpit对象。地图制作主要负责利用LeafLet及其相关插件绘制并渲染地图，实现地图的相关功能。表格绘制主要负责利用echarts-4.2.1.min.js库绘制当前状态下的统计图表。交互相应主要负责利用Jqurey库、echarts库等实现页面的交互功能。

5.4 程序汇编

5.4.1 开发环境

此处的开发环境和全国贫困县可视化系统的开发环境一致，不再赘叙。

5.4.2 主界面汇编

HTML文件主要由Head、Body和Script三个部分组成。Head部分主要负责引入所需要的CSS和JS文件。Body部分主要为HTML的整体框架结构。Body部分包含id为content和content-body的div容器，分别承载图表和地图，content下又分诸多容器用于显示不同的图表类型。而写在HTML部分的JavaScript部分主要是读取当前时间并显示到系统界面上。HTML的架构如图5.4-1所示。

图5.4-1 HTML架构图

5.4.3 逻辑函数汇编

整个程序的逻辑函数全部汇编于“JS/index.js”中，主要编写了基础图元加载、表格绘制和交互操作处理的事务逻辑：程序会首先加载对应的矢量边界数据，然后将该数据通过Jqurey.js库转换为Geojson数据准备进行加载。与此同时，程序会读取相应部分的数据，使用echarts.js库将不同样式不同区域的表格将绘制到界面中。系统整体的逻辑流程如图5.4-2所示。

图5.4-2 系统逻辑流程图

5.5 系统展示

本系统的主要呈现形式就是一个数据可视化大屏。中心界面为全国区域地图，而左侧和右侧则是应用echart.js库实现的各种类型的可视化数据表格。如图5.5-1所示。

图5.5-1 水质情况实时检测系统

这里左侧的“水质量分布情况”可以通过点击调整，而企业污染排放情况也具备鼠标悬停的浮动显示逻辑，右侧的“长江流域水流量”表格采用了动态显示的技术，可以通过点击取消显示某一部分的内容，从而便于用户专注兴趣数据，中心数据地图中也写入了鼠标浮动逻辑，当鼠标悬停在某一区域时会显示该区域名称并改变区域颜色。主要的交互逻辑参考说明如图5.5-2所示。

图5.5-2 交互逻辑流程图