基于Cesium的大氣污染三維動(dòng)態(tài)可視化系統(tǒng)設(shè)計(jì)

王賀，王志寶，陳良富，趙亮

(1.東北石油大學(xué)，計(jì)算機(jī)與信息技術(shù)學(xué)院，黑龍江，大慶 163000；2.中國(guó)科學(xué)院空天信息創(chuàng)新研究院，遙感科學(xué)國(guó)家重點(diǎn)實(shí)驗(yàn)室，北京 100000)

0 引言

近年來(lái)，大氣污染問(wèn)題日益突出。為了能夠準(zhǔn)確地掌握大氣污染的分布情況，古黃玲等[1]將GIS技術(shù)與環(huán)境模型相結(jié)合，展示了株洲市污染點(diǎn)源大氣污染物可視化結(jié)果；XIONG等[2]對(duì)中國(guó)時(shí)空分布特征和PM2.5動(dòng)態(tài)演化趨勢(shì)進(jìn)行可視化展示，以二維形式呈現(xiàn)；PARK等[3]基于Tableau軟件對(duì)韓國(guó)空氣污染分布進(jìn)行了展示；董立曄[4]基于Arcgis Engine進(jìn)行二次開(kāi)發(fā)，構(gòu)建了PM2.5可視化系統(tǒng)，以靜態(tài)方式呈現(xiàn)?，F(xiàn)有研究下的大氣污染可視化表達(dá)大都采用二維方式呈現(xiàn)，部分三維可視化是以靜態(tài)方式展示，同時(shí)存在僅展示污染數(shù)值，尺度單一，未能連續(xù)、動(dòng)態(tài)地展示出不同時(shí)間下的變化情況等問(wèn)題。

針對(duì)以上問(wèn)題，本文提出了一種基于Cesium的大氣污染三維動(dòng)態(tài)可視化展示。采用B/S模式，服務(wù)器端負(fù)責(zé)數(shù)據(jù)的收集、保存以及計(jì)算；客戶端采用Cesium.js地圖引擎結(jié)合Echarts可視化庫(kù)負(fù)責(zé)可視化效果呈現(xiàn)，以三維、動(dòng)態(tài)地可視化方式展示全球尺度和中國(guó)尺度的大氣污染嚴(yán)重程度。

1 系統(tǒng)架構(gòu)介紹

1.1 系統(tǒng)架構(gòu)

所設(shè)計(jì)的系統(tǒng)架構(gòu)分為數(shù)據(jù)層、服務(wù)層、可視化層。研究中用到的空氣質(zhì)量數(shù)據(jù)來(lái)源于中國(guó)環(huán)境監(jiān)測(cè)總站；數(shù)字高程模型(DEM)及影像數(shù)據(jù)來(lái)源于美國(guó)地質(zhì)勘探局USGS(united states geological survey)。將數(shù)據(jù)存儲(chǔ)到服務(wù)器，可以有效緩解客戶端的壓力，所以選擇在服務(wù)器端進(jìn)行數(shù)據(jù)的存儲(chǔ)與計(jì)算處理；可視化端負(fù)責(zé)渲染與呈現(xiàn)。采用B/S模式，用戶在瀏覽器端對(duì)服務(wù)器提出請(qǐng)求，服務(wù)器端通過(guò)請(qǐng)求找到相應(yīng)的數(shù)據(jù)，解析執(zhí)行后，將得到的結(jié)果返回給瀏覽器端，瀏覽器加載頁(yè)面內(nèi)容，顯示給用戶。系統(tǒng)總體架構(gòu)如圖1所示。

圖1

1.2 相關(guān)介紹

1.2.1 Cesium.js

Cesium是一個(gè)開(kāi)源JavaScript庫(kù)，能夠顯示三維地形的地圖。它可以用來(lái)展示多源數(shù)據(jù)，包括三維模型數(shù)據(jù)、地形數(shù)據(jù)、矢量數(shù)據(jù)、影像數(shù)據(jù)等。支持gltf、3D tiles geojson、wmts、STK等格式。同時(shí)，Cesium還支持動(dòng)態(tài)三維展示、允許設(shè)置光照、大氣等參數(shù)，是當(dāng)前可視化平臺(tái)中的佼佼者。

1.2.2 Vue.js

Vue.js是一套漸進(jìn)式JavaScript框架，以自底向上的方式構(gòu)建用戶界面。Vue.js的前端架構(gòu)模式采用MVVM且具有簡(jiǎn)單、靈活的API。由于Vue只關(guān)注視圖層的特點(diǎn)，不僅容易學(xué)習(xí)、上手，與第三方庫(kù)或既有項(xiàng)目整合也更加方便。

1.2.3 Echarts

Echarts是百度公司推出的一個(gè)開(kāi)源可視化庫(kù)，能夠提供全面、直觀、高度定制的數(shù)據(jù)可視化圖表。Echarts支持時(shí)間軸組件timeline,通過(guò)時(shí)間軸的控制可以實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)變化，同時(shí)支持呈現(xiàn)千萬(wàn)級(jí)的數(shù)據(jù)量。

2 關(guān)鍵技術(shù)

2.1 關(guān)鍵技術(shù)介紹

2.1.1 三維柱狀圖

柱狀圖可以直觀地展示多分類的數(shù)據(jù)變化以及同類別各變量的對(duì)比情況，更多的用于對(duì)比分析，由于三維表達(dá)在直觀性和美觀性等方面的優(yōu)勢(shì),越來(lái)越多地應(yīng)用于可視表達(dá)中。何海斌[5]采用三維柱狀圖的方式對(duì)交通中隱患區(qū)域的應(yīng)急力量進(jìn)行對(duì)比，取得了很好的效果。王全民等[6]基于三維柱狀圖對(duì)Netflow日志的流量時(shí)序圖進(jìn)行展示。在三維柱狀圖的構(gòu)建過(guò)程中，對(duì)于高度的確定至關(guān)重要，需要選擇合適的拉伸比例，更好地表達(dá)數(shù)據(jù)的空間分布。本次研究中全球尺度三維可視化采用將三維柱狀圖與三維地球進(jìn)行結(jié)合的方式，并實(shí)現(xiàn)動(dòng)態(tài)效果更好地展示全球各個(gè)國(guó)家的大氣污染情況。

2.1.2 熱力圖

熱力圖是一種用于展示某種現(xiàn)象聚集程度常用的方法。通過(guò)顏色變化程度，可以直觀地展示出熱點(diǎn)分布等信息。周小玲等[7]以熱力圖的方式對(duì)人群活動(dòng)時(shí)間分布特征進(jìn)行了研究。呂偉等[8]通過(guò)繪制應(yīng)急避難疏散路徑熱力圖，直觀地展示了應(yīng)急避難的關(guān)鍵路線，提高了整體應(yīng)急避難效率。在對(duì)大氣污染進(jìn)行研究時(shí)，采用熱力圖可以表示出污染氣體在某一區(qū)域的聚集情況。本次研究中全國(guó)尺度三維動(dòng)態(tài)可視化采用熱力圖的方式展現(xiàn)全國(guó)各地區(qū)空氣質(zhì)量情況，并結(jié)合Echarts展示各個(gè)省份的具體數(shù)值及變化趨勢(shì)。

2.2 關(guān)鍵技術(shù)實(shí)現(xiàn)

2.2.1 三維柱狀圖實(shí)現(xiàn)

三維柱狀圖的繪制包含兩部分：底面部分和高度部分。首先獲取以json格式存儲(chǔ)的世界各國(guó)的經(jīng)緯度坐標(biāo)，并根據(jù)國(guó)家名稱獲取到各國(guó)污染數(shù)值，根據(jù)污染數(shù)值的不同繪制出大小不同的底部，底部范圍越大，證明該國(guó)污染越嚴(yán)重；然后根據(jù)獲取到的數(shù)值繪制高度部分，污染數(shù)值越大，繪制的高度也越高。顏色映射依據(jù)2012 年由環(huán)境保護(hù)部發(fā)布的《環(huán)境空氣質(zhì)量指數(shù)(AQI)技術(shù)規(guī)定(試行)》(HJ 633-2012)，空氣質(zhì)量指數(shù)共分為6個(gè)級(jí)別。根據(jù)指數(shù)大小，空氣質(zhì)量指數(shù)在0到50之間為優(yōu)，在51到100為良，在101到150為輕度污染，在151到200之間為中度污染，在201到300為重度污染，在300以上為嚴(yán)重污染。三維柱狀圖的顏色根據(jù)1～6級(jí)逐級(jí)變化，分別對(duì)應(yīng)綠色、黃色、橙色、紅色、紫色、褐紅色。

2.2.2 熱力圖實(shí)現(xiàn)

首先獲取到計(jì)算后的濃度分布數(shù)據(jù)，每個(gè)點(diǎn)的數(shù)據(jù)格式為{x:xxx,y:xxx,value:xxx}，其中，xxx處填寫當(dāng)前點(diǎn)的經(jīng)度值，yyy處填寫當(dāng)前點(diǎn)的緯度值，value處填寫當(dāng)前點(diǎn)的污染濃度值；利用canvas中繪制圓形的arc方法將每一個(gè)數(shù)據(jù)映射為一個(gè)圓形，具體方法為arc(x,y,radius,startAngle,endAngle,anticlockwise)。方法中的x值和y值分別為獲取到的經(jīng)緯度坐標(biāo)值，startAngle表示為起始角度，取值為0，endAngle表示為終止角度，取值為2*Math.PI。為了避免所有生成的圓形相同，設(shè)置一個(gè)全局的透明度globalAlpha，透明度的值隨著value值的增大而增大，并實(shí)現(xiàn)漸變色效果，使得圓形區(qū)域內(nèi)從圓心到邊緣處的值逐漸變??；最后將各個(gè)圓形內(nèi)的強(qiáng)度值進(jìn)行疊加，并根據(jù)上述空氣質(zhì)量的6個(gè)級(jí)別進(jìn)行顏色映射，完成熱力圖的繪制。

3 三維動(dòng)態(tài)可視化實(shí)現(xiàn)

3.1 全球尺度三維可視化實(shí)現(xiàn)

本次研究中全球尺度三維可視化以三維柱狀圖的形式展示每個(gè)國(guó)家的具體AQI數(shù)值，實(shí)現(xiàn)的具體功能包括：以三維柱狀圖的形式展示不同國(guó)家空氣質(zhì)量情況；空氣質(zhì)量不同，繪制的高度不同、顏色不同；鼠標(biāo)移動(dòng)到某一國(guó)家處顯示數(shù)值；實(shí)現(xiàn)三維地球自轉(zhuǎn)，動(dòng)態(tài)展示空氣質(zhì)量情況；選擇全國(guó)尺度時(shí)，自動(dòng)銷毀三維柱狀圖。圖2為實(shí)現(xiàn)的全球尺度三維可視化效果。圖3為三維可視化濃度值與顏色值對(duì)應(yīng)柱狀圖。

圖2 全球尺度三維可視化

圖3 濃度值與顏色值對(duì)應(yīng)柱狀圖

3.2 全國(guó)尺度三維可視化實(shí)現(xiàn)

本次研究中全國(guó)尺度三維可視化以熱力圖的形式展示每個(gè)省份的空氣質(zhì)量情況，并以北京市為例以統(tǒng)計(jì)圖的方式展示2019年第四季度的AQI變化情況。實(shí)現(xiàn)的具體功能包括：以熱力圖的形式展示全國(guó)空氣質(zhì)量情況；用柱狀圖顯示各省份具體數(shù)值；用折線圖顯示北京市第四季度AQI指數(shù)；熱力圖與折線圖聯(lián)動(dòng)，實(shí)現(xiàn)動(dòng)態(tài)可視化效果；選擇全球尺度時(shí)，自動(dòng)銷毀熱力圖。圖4為實(shí)現(xiàn)的全國(guó)尺度三維可視化效果。

圖4 全國(guó)尺度三維可視化

3.3 可視化結(jié)果分析

從全球尺度三維可視化結(jié)果中可以看出，以三維柱狀圖的方式觀測(cè)效果較好，從顏色及高度信息中可以快速了解到全球各個(gè)國(guó)家的空氣質(zhì)量情況，選中具體國(guó)家可以看出具體數(shù)值。目前全球范圍內(nèi)北美及歐洲地區(qū)空氣質(zhì)量較好，非洲及亞洲地區(qū)普遍空氣質(zhì)量較差；從全國(guó)尺度三維可視化結(jié)果可以看出全國(guó)空氣質(zhì)量整體效果，通過(guò)柱狀圖及折線圖可以看到具體數(shù)值以及變化趨勢(shì)，取得了很好的效果。

4 總結(jié)

本文針對(duì)傳統(tǒng)大氣污染可視化的問(wèn)題，提出了基于Cesium的大氣污染三維動(dòng)態(tài)可視化?？梢暬到y(tǒng)采用B/S模式，從全球尺度和全國(guó)尺度下以三維柱狀圖以及熱力圖的形式實(shí)現(xiàn)了大氣污染三維動(dòng)態(tài)可視化，并結(jié)合Echarts展示了各省份空氣質(zhì)量具體數(shù)值及北京市2019年第四季度變化趨勢(shì)。為用戶提供了良好的交互體驗(yàn)，該研究具有一定的應(yīng)用價(jià)值。