高齊琦 鄭凌兵 孫濤

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

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

中圖分類號： TP311.52 ???文獻標識碼： A??? DOI：10.3969/j.issn.1003-6970.2020.07.045

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）單個點繪制

首先在前端頁面中創(chuàng)建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）多個點疊加

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

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

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

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

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

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

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

（2）過濾黑色素

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

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

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

Primitive API規(guī)定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 ?系統(tǒng)實現(xiàn)效果與意義

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

4? 總結(jié)

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

參考文獻

1. 王金鑫. 地鐵站點有害氣體擴散三維可視化研究[J]. 測繪科學（1）.

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

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

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

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

6. 朱騰蛟， 馬柯， 樊琳. 基于B/S架構(gòu)的庫存風險預警平臺的研究[J]. 軟件， 2015， 36（5）： 133-135.

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

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

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

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

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