基于Cesium的氣體擴(kuò)散可視化系統(tǒng)

高齊琦 鄭凌兵 孫濤

摘? 要： 氣體擴(kuò)散是一種常見(jiàn)現(xiàn)象，搭建高效的可視化系統(tǒng)，對(duì)探索氣體擴(kuò)散規(guī)律并做出快速、準(zhǔn)確、普適性應(yīng)對(duì)具有重要意義。本文針對(duì)目前氣體擴(kuò)散可視化存在的不足，提出建立基于Cesium的氣體擴(kuò)散可視化系統(tǒng)。系統(tǒng)采用B/S架構(gòu)，在服務(wù)器端采用高斯煙羽模型對(duì)氣體擴(kuò)散進(jìn)行模擬計(jì)算，在客戶端完成氣體擴(kuò)散可視化效果。著重講述了可視化效果的方法改進(jìn)與過(guò)程實(shí)現(xiàn)，完成了使用canvas繪制熱力圖并將其與Cesium地圖引擎結(jié)合的應(yīng)用。

關(guān)鍵詞： 氣體擴(kuò)散;可視化系統(tǒng);Cesium

中圖分類(lèi)號(hào)： TP311.52 ???文獻(xiàn)標(biāo)識(shí)碼： A??? DOI：10.3969/j.issn.1003-6970.2020.07.045

本文著錄格式：高齊琦，鄭凌兵，孫濤. 基于Cesium的氣體擴(kuò)散可視化系統(tǒng)[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? 引言

國(guó)內(nèi)外對(duì)氣體擴(kuò)散有一定的研究積累，如地鐵周?chē)鷼怏w擴(kuò)散可視化^[1]、海上事故有害氣體的擴(kuò)散研究^[2]、輕量級(jí)有毒氣體擴(kuò)散在線可視化仿真平臺(tái)^[3]等，但是研究重點(diǎn)多集中在對(duì)擴(kuò)散規(guī)律的數(shù)學(xué)模擬，借助ArcGIS、Matlab等軟件生成圖片展示計(jì)算結(jié)果，或是將分析計(jì)算與可視化都放在服務(wù)器端進(jìn)行，造成服務(wù)器壓力大等問(wèn)題^[4-5]，無(wú)法形成完整高效的可視化系統(tǒng)。

針對(duì)以上問(wèn)題，本文提出基于Cesium的氣體擴(kuò)散可視化系統(tǒng)。系統(tǒng)采用B/S架構(gòu)，服務(wù)器端模擬計(jì)算氣體擴(kuò)散的濃度規(guī)律，客戶端使用Cesium地圖引擎，呈現(xiàn)出2D地圖。前后端通過(guò)通過(guò)Restful接口進(jìn)行數(shù)據(jù)連接，形成完整的氣體擴(kuò)散可視化系統(tǒng)。

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

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

本文提出的氣體擴(kuò)散可視化系統(tǒng)的框架如圖1所示。系統(tǒng)采用B/S結(jié)構(gòu)設(shè)計(jì)，分為服務(wù)器端和客戶端兩大部分，服務(wù)端負(fù)責(zé)數(shù)據(jù)的收集、保存和計(jì)算;瀏覽器端負(fù)責(zé)可視化渲染與展示^[8]。服務(wù)端采用數(shù)據(jù)庫(kù)+數(shù)據(jù)計(jì)算層+Restful API數(shù)據(jù)庫(kù)架構(gòu);客戶端采用Vue.js框架+Cesium.js地圖引擎架構(gòu)。本文1.2節(jié)將對(duì)圖1中每一層架構(gòu)進(jìn)行解析。

客戶端與服務(wù)端又采用標(biāo)準(zhǔn)的HTTP協(xié)議進(jìn)行數(shù)據(jù)的傳輸，數(shù)據(jù)以JSON的格式進(jìn)行發(fā)送和接收。分層的架構(gòu)使得系統(tǒng)層級(jí)明晰、易于理解，開(kāi)發(fā)語(yǔ)言多樣化^[9]，便于多人協(xié)同開(kāi)發(fā)。

1.2? 系統(tǒng)架構(gòu)說(shuō)明

（1）數(shù)據(jù)庫(kù)：本文實(shí)驗(yàn)系統(tǒng)采用SQLite數(shù)據(jù)庫(kù)，這是一種輕型數(shù)據(jù)庫(kù)，易于被集成到系統(tǒng)中，且具有簡(jiǎn)潔、開(kāi)源等優(yōu)秀性能。SQLite數(shù)據(jù)庫(kù)在系統(tǒng)中用于組織、存儲(chǔ)和管理數(shù)據(jù)，從而保證數(shù)據(jù)的可靠性。

（2）數(shù)據(jù)計(jì)算層：數(shù)據(jù)計(jì)算層使用高斯煙羽模型氣體擴(kuò)散規(guī)律進(jìn)行模擬計(jì)算。高斯煙羽模型是一種數(shù)學(xué)方法，近似地適用于開(kāi)闊平坦地形上風(fēng)速不太小時(shí)候的小尺度擴(kuò)散計(jì)算，也可以根據(jù)地形、氣象條件和排放源幾何形狀的特殊性，轉(zhuǎn)換成各種變型模式。

（3）Restful API：本文實(shí)驗(yàn)系統(tǒng)使用Restful架構(gòu)，這是一種針對(duì)網(wǎng)絡(luò)應(yīng)用開(kāi)發(fā)的架構(gòu)，具有簡(jiǎn)潔靈活高效的優(yōu)點(diǎn)。應(yīng)用此架構(gòu)，前端頁(yè)面不再需要數(shù)據(jù)表去保存資源，所有的資源均通過(guò)Restful API從服務(wù)器端獲取，保證前后端分離，系統(tǒng)結(jié)構(gòu)簡(jiǎn)潔高效。

（4）Vue.js：前端頁(yè)面基于Vue.js構(gòu)建MVVM（Model-View-ViewModel）模式的漸進(jìn)式框架，采用自底向上增量開(kāi)發(fā)設(shè)計(jì)，核心庫(kù)只關(guān)注圖層，拓展了HTML功能。

（5）Cesium.js：Cesium.js是一個(gè)跨平臺(tái)、跨瀏覽器的開(kāi)源JavaScript庫(kù)，用于在Web瀏覽器創(chuàng)建2D和3D地圖，使用WebGL來(lái)進(jìn)行硬件加速圖形化，無(wú)需任何插件。開(kāi)發(fā)文檔和三維地球應(yīng)用實(shí)例豐富，同時(shí)與開(kāi)源地圖前端OpenLayer結(jié)合緊密，開(kāi)發(fā)者活躍^[10]。且兼容2D和3D地圖的特性，具有豐富、穩(wěn)定、易于延展等不可替代的優(yōu)勢(shì)。

（6）氣體擴(kuò)散可視化：圖1中黑色虛線框中氣體擴(kuò)散可視化，是本文研究重點(diǎn)內(nèi)容，將在1.3節(jié)關(guān)鍵技術(shù)介紹中詳細(xì)描述。

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

對(duì)于濃度、密度等相關(guān)可視化研究中，熱力圖為較好的表現(xiàn)形式。如車(chē)流量熱力圖繪制系統(tǒng)^[7]，戰(zhàn)場(chǎng)態(tài)勢(shì)熱力圖構(gòu)建方法研究^[8]，但是很少有基于Cesium直接在前端繪制熱力圖的方法。本文在當(dāng)前研究基礎(chǔ)上，提出前端通過(guò)繪制Canvas方式生成熱力圖，并對(duì)Cesium自帶矩形貼圖將熱力圖與地圖結(jié)合的方法。本文將在第2章氣體擴(kuò)散可視化實(shí)現(xiàn)中詳細(xì)描述實(shí)驗(yàn)方法。

2? 氣體擴(kuò)散可視化實(shí)現(xiàn)

2.1 ?Canvas格式熱力圖生成原理

通過(guò)Restful接口從后端獲取的計(jì)算后的濃度分布數(shù)據(jù)，單個(gè)點(diǎn)格式為{lat： xxx， lng： xxx， value： xxx}，lat代表緯度，lng代表經(jīng)度，value代表當(dāng)前坐標(biāo)氣體濃度。

（1）單個(gè)點(diǎn)繪制

首先在前端頁(yè)面中創(chuàng)建canvas畫(huà)布，使用canvas.getContext（‘2d）接口獲取畫(huà)筆，再通過(guò)createRadialGradient（x，y，radius，x，y，radius）方法繪制一個(gè)漸變的圓形對(duì)象gradient。在起始點(diǎn)圓心設(shè)置顏色為透明度為100%，即rgba（0，0，0，1）的黑色，在終止點(diǎn)半徑處設(shè)置透明度為0%，即rgba（0，0，0，0）的黑色，從而形成一個(gè)由圓形向半徑、黑色由透明度100%到0%漸變的圓形，如圖3所示。

（2）多個(gè)點(diǎn)疊加

由于氣體濃度的分布不僅僅是一個(gè)點(diǎn)，而是多個(gè)點(diǎn)的離散分布，點(diǎn)密集相交處會(huì)產(chǎn)生濃度疊加。這里利用透明度可疊加的屬性，解決濃度疊加問(wèn)題。針對(duì)于每個(gè)濃度點(diǎn){lat： xxx， lng： xxx， value： xxx}，將濃度value值轉(zhuǎn)化為alpha，原理是選取濃度最大值max和濃度最小值min，根據(jù)value在所有濃度范圍內(nèi)的比例，計(jì)算出對(duì)應(yīng)的alpha。方法為alpha= （value-min）/（max-min）。

計(jì)算出每個(gè)濃度點(diǎn)的alpha后，在頁(yè)面中渲染繪制所有點(diǎn)，由圖4可見(jiàn)，點(diǎn)較為密集或濃度較大的區(qū)域被渲染為較深的灰色，周邊呈現(xiàn)出顏色漸淺的灰色。

經(jīng)過(guò)（1）（2）兩步后，氣體濃度已經(jīng)在canvas畫(huà)布上以灰白形式體現(xiàn)出，需要將其轉(zhuǎn)化為彩色。方法為首先生成一個(gè)線性結(jié)構(gòu)的顏色字典，規(guī)定透明度從低到高該使用哪些顏色，然后遍歷黑白圖像的每一個(gè)像素，讀取alpha值，查詢顏色字典，進(jìn)行填色。填色完成后的canvas圖片如圖5所示。

2.2? 熱力圖與地圖結(jié)合的方法介紹

在2.1節(jié)中已經(jīng)繪制出了熱力圖，本節(jié)將介紹如何把熱力圖與地圖結(jié)合。

（1）將cavans熱力圖與Cesium自帶矩形結(jié)合

Cesium中雖然沒(méi)有繪制熱力圖的方法，卻提供了多種圖形繪制API，如圖6所示。圖形繪制包含兩個(gè)部分，一是幾何形狀（Geometry），定義了Primitive的結(jié)構(gòu)，例如三角形、線條、點(diǎn)等;二是外觀（Appearance），定義著色（Sharding），包括GLSL（OpenGL著色語(yǔ)言，OpenGL Shading Language）頂點(diǎn)著色器和片段著色器（vertex and fragment shaders），以及渲染狀態(tài)（render state）等。

（2）過(guò)濾黑色素

由于geometry在使用貼圖時(shí)，會(huì)將沒(méi)有色素的部分全部以黑色呈現(xiàn)。創(chuàng)建一個(gè)矩形geometry，將繪制好的canvas格式熱力圖作為貼圖材質(zhì)material添加到矩形上，效果如圖7所示。

為了解決這一問(wèn)題，需要使用Cesium中的Primitive API。這是一種面向圖形開(kāi)發(fā)人員的底層API，包含圖形學(xué)基本原理和實(shí)現(xiàn)方法，具有更大的靈活性。

Primitive API中規(guī)定了一種基于Json格式來(lái)描述材質(zhì)的機(jī)制Fabric，F(xiàn)abric可以包含四個(gè)部分，分別為type、uniforms、components和source。type為材質(zhì)描;uniforms為webgl中漫反射材質(zhì)屬性;components包含定義外觀的子屬性，每個(gè)子屬性為GLSL代碼段;source是components的替代，用于更復(fù)雜的GLSL代碼。

Primitive API規(guī)定canvas屬于image類(lèi)型，而image為透明度和rgb顏色通道的集合。將canvas格式熱力圖作為image的對(duì)象引入。雖然無(wú)法直接提取黑色色素，但當(dāng)紅色色素值小于1.0/255.0，近似可以為黑色色素。所以在source中提取紅色色素float red = texture2D（image， materialInput.st）.r，判斷當(dāng)red<1.0/255.0時(shí)，將該像素的透明度設(shè)為1，這樣就過(guò)濾掉了所有的黑色色素，最終的效果如圖9所示。

3 ?系統(tǒng)實(shí)現(xiàn)效果與意義

系統(tǒng)在初始化頁(yè)面可在地圖上選取污染點(diǎn)，并且提供是否為白天、是否為晴天、云量大小等氣象參數(shù)設(shè)置。這些參數(shù)傳給服務(wù)端的數(shù)據(jù)計(jì)算層，模擬出氣體擴(kuò)散趨勢(shì)，并選取每十分鐘為一個(gè)間隔點(diǎn)，在頁(yè)面中繪制出對(duì)應(yīng)時(shí)間點(diǎn)的氣體濃度分布熱力圖熱力圖，呈現(xiàn)出動(dòng)畫(huà)變換擴(kuò)散趨勢(shì)。系統(tǒng)中根據(jù)不同氣體的危害程度，將濃度區(qū)分為致死區(qū)、重傷區(qū)和輕傷區(qū)，對(duì)救援與指導(dǎo)疏散有一定的指導(dǎo)意義^[11]。

4? 總結(jié)

本文針對(duì)于傳統(tǒng)氣體擴(kuò)散可視化的缺陷，對(duì)其進(jìn)行升級(jí)，提出了基于Cesium的氣體擴(kuò)散可視化系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)。采用前后端分離的技術(shù)架構(gòu)，解決了服務(wù)器壓力大、前后端人員無(wú)法同步開(kāi)發(fā)等問(wèn)題。并針對(duì)Cesium無(wú)法直接生成熱力圖的問(wèn)題，提出繪制canvas格式熱力圖、將熱力圖與Cesium結(jié)合的解決方案，為用戶提供良好的交互體驗(yàn)。該系統(tǒng)是一套易用、易于維護(hù)的氣體擴(kuò)散可視化系統(tǒng)，因此該研究是有理論意義且具有應(yīng)用價(jià)值的。

參考文獻(xiàn)

1. 王金鑫. 地鐵站點(diǎn)有害氣體擴(kuò)散三維可視化研究[J]. 測(cè)繪科學(xué)（1）.

2. 付金宇， 李穎， 吳鵬， 等. 海上事故有害氣體的擴(kuò)散研究——以“桑吉”輪撞船事故為例[J]. 海洋通報(bào)， 2019， 38（1）： 118-123.

3. 賈金原， 趙薪智， 李盤(pán)靖. 輕量級(jí)有毒氣體擴(kuò)散在線可視化仿真平臺(tái)[J]. 系統(tǒng)仿真學(xué)報(bào)， 2019， 31（2）： 132-136+143.

4. 楊振宇. 高校招生數(shù)據(jù)采集及分析系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件， 2015， 36（5）： 61-66.

5. 蔣方玲. 用戶驅(qū)動(dòng)的軟件實(shí)施方法研究[J]. 軟件， 2015， 36（5）： 89-92.

6. 朱騰蛟， 馬柯， 樊琳. 基于B/S架構(gòu)的庫(kù)存風(fēng)險(xiǎn)預(yù)警平臺(tái)的研究[J]. 軟件， 2015， 36（5）： 133-135.

7. 肖坤峨， 虞泉. 基于WEB的智能答疑系統(tǒng)的研究與構(gòu)建[J]. 軟件， 2015， 36（6）： 31-36.

8. 孫曉鵬， 張芳， 應(yīng)國(guó)偉， 等. 基于Cesium.js和天地圖的三維場(chǎng)景構(gòu)建方法[J]. 地理空間信息， 2018.

9. 高峰. 車(chē)流量熱力圖繪制系統(tǒng)[D]. 2017.

10. 戰(zhàn)場(chǎng)態(tài)勢(shì)熱力圖構(gòu)建方法研究[J]. 指揮控制與仿真， 2017（5）.

11. 熊宗炬， 周波， 李劍陽(yáng). 突發(fā)事件應(yīng)急通信系統(tǒng)原型設(shè)計(jì)[J]. 軟件， 2016， 37（4）： 04-07.