基于Cesium的大气污染三维动态可视化系统设计

王贺，王志宝，陈良富，赵亮

(1.东北石油大学，计算机与信息技术学院，黑龙江，大庆 163000；2.中国科学院空天信息创新研究院，遥感科学国家重点实验室，北京 100000)

0 引言

近年来，大气污染问题日益突出。为了能够准确地掌握大气污染的分布情况，古黄玲等[1]将GIS技术与环境模型相结合，展示了株洲市污染点源大气污染物可视化结果；XIONG等[2]对中国时空分布特征和PM2.5动态演化趋势进行可视化展示，以二维形式呈现；PARK等[3]基于Tableau软件对韩国空气污染分布进行了展示；董立晔[4]基于Arcgis Engine进行二次开发，构建了PM2.5可视化系统，以静态方式呈现。现有研究下的大气污染可视化表达大都采用二维方式呈现，部分三维可视化是以静态方式展示，同时存在仅展示污染数值，尺度单一，未能连续、动态地展示出不同时间下的变化情况等问题。

针对以上问题，本文提出了一种基于Cesium的大气污染三维动态可视化展示。采用B/S模式，服务器端负责数据的收集、保存以及计算；客户端采用Cesium.js地图引擎结合Echarts可视化库负责可视化效果呈现，以三维、动态地可视化方式展示全球尺度和中国尺度的大气污染严重程度。

1 系统架构介绍

1.1 系统架构

所设计的系统架构分为数据层、服务层、可视化层。研究中用到的空气质量数据来源于中国环境监测总站；数字高程模型(DEM)及影像数据来源于美国地质勘探局USGS(united states geological survey)。将数据存储到服务器，可以有效缓解客户端的压力，所以选择在服务器端进行数据的存储与计算处理；可视化端负责渲染与呈现。采用B/S模式，用户在浏览器端对服务器提出请求，服务器端通过请求找到相应的数据，解析执行后，将得到的结果返回给浏览器端，浏览器加载页面内容，显示给用户。系统总体架构如图1所示。

图1

1.2 相关介绍

1.2.1 Cesium.js

Cesium是一个开源JavaScript库，能够显示三维地形的地图。它可以用来展示多源数据，包括三维模型数据、地形数据、矢量数据、影像数据等。支持gltf、3D tiles geojson、wmts、STK等格式。同时，Cesium还支持动态三维展示、允许设置光照、大气等参数，是当前可视化平台中的佼佼者。

1.2.2 Vue.js

Vue.js是一套渐进式JavaScript框架，以自底向上的方式构建用户界面。Vue.js的前端架构模式采用MVVM且具有简单、灵活的API。由于Vue只关注视图层的特点，不仅容易学习、上手，与第三方库或既有项目整合也更加方便。

1.2.3 Echarts

Echarts是百度公司推出的一个开源可视化库，能够提供全面、直观、高度定制的数据可视化图表。Echarts支持时间轴组件timeline,通过时间轴的控制可以实现数据的动态变化，同时支持呈现千万级的数据量。

2 关键技术

2.1 关键技术介绍

2.1.1 三维柱状图

柱状图可以直观地展示多分类的数据变化以及同类别各变量的对比情况，更多的用于对比分析，由于三维表达在直观性和美观性等方面的优势,越来越多地应用于可视表达中。何海斌[5]采用三维柱状图的方式对交通中隐患区域的应急力量进行对比，取得了很好的效果。王全民等[6]基于三维柱状图对Netflow日志的流量时序图进行展示。在三维柱状图的构建过程中，对于高度的确定至关重要，需要选择合适的拉伸比例，更好地表达数据的空间分布。本次研究中全球尺度三维可视化采用将三维柱状图与三维地球进行结合的方式，并实现动态效果更好地展示全球各个国家的大气污染情况。

2.1.2 热力图

热力图是一种用于展示某种现象聚集程度常用的方法。通过颜色变化程度，可以直观地展示出热点分布等信息。周小玲等[7]以热力图的方式对人群活动时间分布特征进行了研究。吕伟等[8]通过绘制应急避难疏散路径热力图，直观地展示了应急避难的关键路线，提高了整体应急避难效率。在对大气污染进行研究时，采用热力图可以表示出污染气体在某一区域的聚集情况。本次研究中全国尺度三维动态可视化采用热力图的方式展现全国各地区空气质量情况，并结合Echarts展示各个省份的具体数值及变化趋势。

2.2 关键技术实现

2.2.1 三维柱状图实现

三维柱状图的绘制包含两部分：底面部分和高度部分。首先获取以json格式存储的世界各国的经纬度坐标，并根据国家名称获取到各国污染数值，根据污染数值的不同绘制出大小不同的底部，底部范围越大，证明该国污染越严重；然后根据获取到的数值绘制高度部分，污染数值越大，绘制的高度也越高。颜色映射依据2012 年由环境保护部发布的《环境空气质量指数(AQI)技术规定(试行)》(HJ 633-2012)，空气质量指数共分为6个级别。根据指数大小，空气质量指数在0到50之间为优，在51到100为良，在101到150为轻度污染，在151到200之间为中度污染，在201到300为重度污染，在300以上为严重污染。三维柱状图的颜色根据1～6级逐级变化，分别对应绿色、黄色、橙色、红色、紫色、褐红色。

2.2.2 热力图实现

首先获取到计算后的浓度分布数据，每个点的数据格式为{x:xxx,y:xxx,value:xxx}，其中，xxx处填写当前点的经度值，yyy处填写当前点的纬度值，value处填写当前点的污染浓度值；利用canvas中绘制圆形的arc方法将每一个数据映射为一个圆形，具体方法为arc(x,y,radius,startAngle,endAngle,anticlockwise)。方法中的x值和y值分别为获取到的经纬度坐标值，startAngle表示为起始角度，取值为0，endAngle表示为终止角度，取值为2*Math.PI。为了避免所有生成的圆形相同，设置一个全局的透明度globalAlpha，透明度的值随着value值的增大而增大，并实现渐变色效果，使得圆形区域内从圆心到边缘处的值逐渐变小；最后将各个圆形内的强度值进行叠加，并根据上述空气质量的6个级别进行颜色映射，完成热力图的绘制。

3 三维动态可视化实现

3.1 全球尺度三维可视化实现

本次研究中全球尺度三维可视化以三维柱状图的形式展示每个国家的具体AQI数值，实现的具体功能包括：以三维柱状图的形式展示不同国家空气质量情况；空气质量不同，绘制的高度不同、颜色不同；鼠标移动到某一国家处显示数值；实现三维地球自转，动态展示空气质量情况；选择全国尺度时，自动销毁三维柱状图。图2为实现的全球尺度三维可视化效果。图3为三维可视化浓度值与颜色值对应柱状图。

图2 全球尺度三维可视化

图3 浓度值与颜色值对应柱状图

3.2 全国尺度三维可视化实现

本次研究中全国尺度三维可视化以热力图的形式展示每个省份的空气质量情况，并以北京市为例以统计图的方式展示2019年第四季度的AQI变化情况。实现的具体功能包括：以热力图的形式展示全国空气质量情况；用柱状图显示各省份具体数值；用折线图显示北京市第四季度AQI指数；热力图与折线图联动，实现动态可视化效果；选择全球尺度时，自动销毁热力图。图4为实现的全国尺度三维可视化效果。

图4 全国尺度三维可视化

3.3 可视化结果分析

从全球尺度三维可视化结果中可以看出，以三维柱状图的方式观测效果较好，从颜色及高度信息中可以快速了解到全球各个国家的空气质量情况，选中具体国家可以看出具体数值。目前全球范围内北美及欧洲地区空气质量较好，非洲及亚洲地区普遍空气质量较差；从全国尺度三维可视化结果可以看出全国空气质量整体效果，通过柱状图及折线图可以看到具体数值以及变化趋势，取得了很好的效果。

4 总结

本文针对传统大气污染可视化的问题，提出了基于Cesium的大气污染三维动态可视化。可视化系统采用B/S模式，从全球尺度和全国尺度下以三维柱状图以及热力图的形式实现了大气污染三维动态可视化，并结合Echarts展示了各省份空气质量具体数值及北京市2019年第四季度变化趋势。为用户提供了良好的交互体验，该研究具有一定的应用价值。