基于Cesium的气体扩散可视化系统

2020-12-24高齐琦郑凌兵孙涛

软件 2020年7期

高齐琦郑凌兵孙涛

摘要：气体扩散是一种常见现象，搭建高效的可视化系统，对探索气体扩散规律并做出快速、准确、普适性应对具有重要意義。本文针对目前气体扩散可视化存在的不足，提出建立基于Cesium的气体扩散可视化系统。系统采用B/S架构，在服务器端采用高斯烟羽模型对气体扩散进行模拟计算，在客户端完成气体扩散可视化效果。着重讲述了可视化效果的方法改进与过程实现，完成了使用canvas绘制热力图并将其与Cesium地图引擎结合的应用。

关键词：气体扩散;可视化系统;Cesium

中图分类号： TP311.52 文献标识码： A DOI：10.3969/j.issn.1003-6970.2020.07.045

本文著录格式：高齐琦，郑凌兵，孙涛. 基于Cesium的气体扩散可视化系统[J]. 软件，2020，41（07）：220-223

Visualization System of Gas Diffusion Based on Cesium

GAO Qi-qi， ZHENG Ling-bing， SUN Tao

（CETHIK GROUP CO.， LTD， HangZhou 310000， China）

【Abstract】： Gas diffusion is a common phenomenon. Building an efficient visualization system is of great significance to explore the law of gas diffusion and make a rapid， accurate and universal response. In view of the shortcomings of current visualization of gas diffusion， a gas diffusion visualization system based on Cesium is proposed in this paper. The system uses B/S architecture， and the Gauss plume model is used to simulate the gas diffusion on the server side， and the visualization of gas diffusion is completed on the client side. This paper focuses on the improvement of visualization method and the realization of the process， and completes the application of drawing thermal map with canvas and combining it with Cesium map engine.

【Key words】： Gas diffusion; Visualization system; Cesium

0 引言

国内外对气体扩散有一定的研究积累，如地铁周围气体扩散可视化^[1]、海上事故有害气体的扩散研究^[2]、轻量级有毒气体扩散在线可视化仿真平台^[3]等，但是研究重点多集中在对扩散规律的数学模拟，借助ArcGIS、Matlab等软件生成图片展示计算结果，或是将分析计算与可视化都放在服务器端进行，造成服务器压力大等问题^[4-5]，无法形成完整高效的可视化系统。

针对以上问题，本文提出基于Cesium的气体扩散可视化系统。系统采用B/S架构，服务器端模拟计算气体扩散的浓度规律，客户端使用Cesium地图引擎，呈现出2D地图。前后端通过通过Restful接口进行数据连接，形成完整的气体扩散可视化系统。

1 系统架构介绍

1.1 系统架构

本文提出的气体扩散可视化系统的框架如图1所示。系统采用B/S结构设计，分为服务器端和客户端两大部分，服务端负责数据的收集、保存和计算;浏览器端负责可视化渲染与展示^[8]。服务端采用数据库+数据计算层+Restful API数据库架构;客户端采用Vue.js框架+Cesium.js地图引擎架构。本文1.2节将对图1中每一层架构进行解析。

客户端与服务端又采用标准的HTTP协议进行数据的传输，数据以JSON的格式进行发送和接收。分层的架构使得系统层级明晰、易于理解，开发语言多样化^[9]，便于多人协同开发。

1.2 系统架构说明

（1）数据库：本文实验系统采用SQLite数据库，这是一种轻型数据库，易于被集成到系统中，且具有简洁、开源等优秀性能。SQLite数据库在系统中用于组织、存储和管理数据，从而保证数据的可靠性。

（2）数据计算层：数据计算层使用高斯烟羽模型气体扩散规律进行模拟计算。高斯烟羽模型是一种数学方法，近似地适用于开阔平坦地形上风速不太小时候的小尺度扩散计算，也可以根据地形、气象条件和排放源几何形状的特殊性，转换成各种变型模式。

（3）Restful API：本文实验系统使用Restful架构，这是一种针对网络应用开发的架构，具有简洁灵活高效的优点。应用此架构，前端页面不再需要数据表去保存资源，所有的资源均通过Restful API从服务器端获取，保证前后端分离，系统结构简洁高效。

（4）Vue.js：前端页面基于Vue.js构建MVVM（Model-View-ViewModel）模式的渐进式框架，采用自底向上增量开发设计，核心库只关注图层，拓展了HTML功能。

（5）Cesium.js：Cesium.js是一个跨平台、跨浏览器的开源JavaScript库，用于在Web浏览器创建2D和3D地图，使用WebGL来进行硬件加速图形化，无需任何插件。开发文档和三维地球应用实例丰富，同时与开源地图前端OpenLayer结合紧密，开发者活跃^[10]。且兼容2D和3D地图的特性，具有丰富、稳定、易于延展等不可替代的优势。

（6）气体扩散可视化：图1中黑色虚线框中气体扩散可视化，是本文研究重点内容，将在1.3节关键技术介绍中详细描述。

1.3 关键技术介绍

对于浓度、密度等相关可视化研究中，热力图为较好的表现形式。如车流量热力图绘制系统^[7]，战场态势热力图构建方法研究^[8]，但是很少有基于Cesium直接在前端绘制热力图的方法。本文在当前研究基础上，提出前端通过绘制Canvas方式生成热力图，并对Cesium自带矩形贴图将热力图与地图结合的方法。本文将在第2章气体扩散可视化实现中详细描述实验方法。

2 气体扩散可视化实现

2.1 Canvas格式热力图生成原理

通过Restful接口从后端获取的计算后的浓度分布数据，单个点格式为{lat： xxx， lng： xxx， value： xxx}，lat代表纬度，lng代表经度，value代表当前坐标气体浓度。

（1）单个点绘制

首先在前端页面中创建canvas画布，使用canvas.getContext（‘2d）接口获取画笔，再通过createRadialGradient（x，y，radius，x，y，radius）方法绘制一个渐变的圆形对象gradient。在起始点圆心设置颜色为透明度为100%，即rgba（0，0，0，1）的黑色，在终止点半径处设置透明度为0%，即rgba（0，0，0，0）的黑色，从而形成一个由圆形向半径、黑色由透明度100%到0%渐变的圆形，如图3所示。

（2）多个点叠加

由于气体浓度的分布不仅仅是一个点，而是多个点的离散分布，点密集相交处会产生浓度叠加。这里利用透明度可叠加的属性，解决浓度叠加问题。针对于每个浓度点{lat： xxx， lng： xxx， value： xxx}，将浓度value值转化为alpha，原理是选取浓度最大值max和浓度最小值min，根据value在所有浓度范围内的比例，计算出对应的alpha。方法为alpha= （value-min）/（max-min）。

计算出每个浓度点的alpha后，在页面中渲染绘制所有点，由图4可见，点较为密集或浓度较大的区域被渲染为较深的灰色，周边呈现出颜色渐浅的灰色。

经过（1）（2）两步后，气体浓度已经在canvas画布上以灰白形式体现出，需要将其转化为彩色。方法为首先生成一个线性结构的颜色字典，规定透明度从低到高该使用哪些颜色，然后遍历黑白图像的每一个像素，读取alpha值，查询颜色字典，进行填色。填色完成后的canvas图片如图5所示。

2.2 热力图与地图结合的方法介绍

在2.1节中已经绘制出了热力图，本节将介绍如何把热力图与地图结合。

（1）将cavans热力图与Cesium自带矩形结合

Cesium中虽然没有绘制热力图的方法，却提供了多种图形绘制API，如图6所示。图形绘制包含两个部分，一是几何形状（Geometry），定义了Primitive的结构，例如三角形、线条、点等;二是外观（Appearance），定义着色（Sharding），包括GLSL（OpenGL着色语言，OpenGL Shading Language）顶点着色器和片段着色器（vertex and fragment shaders），以及渲染状态（render state）等。

（2）过滤黑色素

由于geometry在使用贴图时，会将没有色素的部分全部以黑色呈现。创建一个矩形geometry，将绘制好的canvas格式热力图作为贴图材质material添加到矩形上，效果如图7所示。

为了解决这一问题，需要使用Cesium中的Primitive API。这是一种面向图形开发人员的底层API，包含图形学基本原理和实现方法，具有更大的灵活性。

Primitive API中规定了一种基于Json格式来描述材质的机制Fabric，Fabric可以包含四个部分，分别为type、uniforms、components和source。type为材质描;uniforms為webgl中漫反射材质属性;components包含定义外观的子属性，每个子属性为GLSL代码段;source是components的替代，用于更复杂的GLSL代码。

Primitive API规定canvas属于image类型，而image为透明度和rgb颜色通道的集合。将canvas格式热力图作为image的对象引入。虽然无法直接提取黑色色素，但当红色色素值小于1.0/255.0，近似可以为黑色色素。所以在source中提取红色色素float red = texture2D（image， materialInput.st）.r，判断当red<1.0/255.0时，将该像素的透明度设为1，这样就过滤掉了所有的黑色色素，最终的效果如图9所示。

3 系统实现效果与意义

系统在初始化页面可在地图上选取污染点，并且提供是否为白天、是否为晴天、云量大小等气象参数设置。这些参数传给服务端的数据计算层，模拟出气体扩散趋势，并选取每十分钟为一个间隔点，在页面中绘制出对应时间点的气体浓度分布热力图热力图，呈现出动画变换扩散趋势。系统中根据不同气体的危害程度，将浓度区分为致死区、重伤区和轻伤区，对救援与指导疏散有一定的指导意义^[11]。

4 总结

本文针对于传统气体扩散可视化的缺陷，对其进行升级，提出了基于Cesium的气体扩散可视化系统的设计和实现。采用前后端分离的技术架构，解决了服务器压力大、前后端人员无法同步开发等问题。并针对Cesium无法直接生成热力图的问题，提出绘制canvas格式热力图、将热力图与Cesium结合的解决方案，为用户提供良好的交互体验。该系统是一套易用、易于维护的气体扩散可视化系统，因此该研究是有理论意义且具有应用价值的。

参考文献