一種快速的四維水體Web展示算法

王夢(mèng)珂 黃少捷 任富彬

摘? 要：水質(zhì)管理信息化的需求日益增加，但水體數(shù)據(jù)的繁雜多樣為高效管理水質(zhì)數(shù)據(jù)帶來了不便。針對(duì)這種情況，設(shè)計(jì)了一種可以快速將水體的各類復(fù)雜數(shù)據(jù)及其間的數(shù)據(jù)關(guān)系進(jìn)行可視化表達(dá)的算法。根據(jù)水質(zhì)儀采集少量的樣本點(diǎn)，分別生成水體水平面、底面和中間部分的大量散點(diǎn)，描繪出水體的形狀。然后計(jì)算每一個(gè)散點(diǎn)對(duì)應(yīng)的水質(zhì)數(shù)據(jù)，按照水質(zhì)數(shù)據(jù)對(duì)散點(diǎn)進(jìn)行顏色渲染，通過不同的顏色表現(xiàn)出水質(zhì)狀況。最后借助ECharts在Web頁面上進(jìn)行水體數(shù)據(jù)可視化展示。實(shí)驗(yàn)結(jié)果表明，該算法可以直觀、快速地表現(xiàn)水體的各類數(shù)據(jù)，幫助對(duì)水體的水質(zhì)進(jìn)行網(wǎng)絡(luò)化、科學(xué)、直觀的分析。

關(guān)鍵詞：水質(zhì)數(shù)據(jù);四維可視化;Web

中圖分類號(hào)：TP311.5? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

Abstract： With the ever-increasing demand for the information-based water quality management， a visualization algorithm， which can quickly display various kinds of water quality data and their relationship is proposed. The proposed algorithm can grapple with the inconvenience caused by the complicated water body data. The algorithm deals with a large number of water data points that are collected by water quality instrument. The water data points are scattered in many places such as at different water levels， surface， bottom or middle parts respectively. These water data points describe shapes of the water body. Then the water quality of each scatter water point is indicated by using different colors. Finally， ECharts are used to visualize the water data on web page. The experimental results show that the algorithm can express all kinds of water qualities directly and quickly， realizing the web-based， scientific and direct analysis of water quality.

Keywords： water quality data; 4D visualization; Web

1? ?引言（Introduction）

隨著城市建設(shè)不斷健全，人們對(duì)居住環(huán)境的質(zhì)量的關(guān)注也與日俱增。水環(huán)境的質(zhì)量便是環(huán)境質(zhì)量的重要組成部分。水體與人們的生活息息相關(guān)，水質(zhì)信息化的需求日益增加。

對(duì)于水質(zhì)檢測(cè)工作者來說，水體數(shù)據(jù)繁雜多樣是現(xiàn)在水質(zhì)處理管理領(lǐng)域面臨的重大挑戰(zhàn)。隨著當(dāng)代科技的進(jìn)步，計(jì)算機(jī)圖形學(xué)技術(shù)和圖像處理技術(shù)有了飛速發(fā)展。數(shù)據(jù)可視化軟件可以將這些不夠直觀的數(shù)據(jù)轉(zhuǎn)化更為直觀、易于理解的圖像[1]，這樣分析人員可以從簡(jiǎn)單的顏色變化、圖像對(duì)比中較為容易地掌握水體的水質(zhì)現(xiàn)狀。水體數(shù)據(jù)可視化分析軟件可以很好地協(xié)助檢測(cè)部門做好水質(zhì)的檢測(cè)工作，并根據(jù)水體數(shù)據(jù)的動(dòng)態(tài)變化提供相應(yīng)的應(yīng)對(duì)方法，為民眾的身體健康提供保障。水體環(huán)境數(shù)據(jù)可視化分析是水環(huán)境治理中數(shù)據(jù)分析的重要手段，但目前在國(guó)內(nèi)還沒有得到較好的應(yīng)用[2]。

當(dāng)前主要有兩類水體數(shù)據(jù)可視化平臺(tái)。一類是獨(dú)立軟件形式的，可以提供較為健全的可視化功能和交互功能。另外一類是基于瀏覽器插件或虛擬化桌面的形式，近年來功能得到了不斷的完善，有替換純客戶端形式的趨勢(shì)[3]。這兩種可視化系統(tǒng)需要安裝特定的軟件，對(duì)特定的平臺(tái)或插件有較強(qiáng)的依賴性。這提高了系統(tǒng)維護(hù)的成本與難度，對(duì)后期系統(tǒng)維護(hù)和升級(jí)來說，也存在一定的隱患。

2? ?相關(guān)工作（Related work）

無須在瀏覽器上安裝第三方插件，即可展示良好可視化效果的Web系統(tǒng)，已經(jīng)成為未來的發(fā)展趨勢(shì)。一些學(xué)者已開始對(duì)此研究，并取得了一定的進(jìn)展。

周陽等[4]基于WebGL，以水利場(chǎng)景及設(shè)施為可視化的主體內(nèi)容，對(duì)三維WebGIS的構(gòu)造方法展開了研究。他們根據(jù)河道及水利設(shè)施的特點(diǎn)，提出了一條新的技術(shù)路線：先提取水利場(chǎng)景的數(shù)字高程模型和三維模型的相關(guān)數(shù)據(jù)，對(duì)其進(jìn)行分析和處理，再構(gòu)建虛擬的三維場(chǎng)景。這種方法無須安裝額外的插件，就能在Web瀏覽器端對(duì)三維模型的進(jìn)行快速渲染，為用戶帶來流暢的交互式三維可視化體驗(yàn)。

高鵬等[5]提出以服務(wù)器為中心的建模思想，利用HTML5標(biāo)準(zhǔn)集成的Web Socket和Canvas協(xié)議在網(wǎng)頁進(jìn)行事件交互、主客戶端雙向通信、圖形圖像繪制，結(jié)合VTK三維可視化工具包，在服務(wù)器端進(jìn)行數(shù)據(jù)處理、渲染，并投影為二維圖片后發(fā)送到客戶端顯示。這種做法避免了客戶端因三維渲染而產(chǎn)生的硬件配置和初始網(wǎng)絡(luò)傳輸壓力，實(shí)現(xiàn)了三維重建交互和Web的無縫集成。

喬梁等[6]采用以服務(wù)器處理為中心的偏態(tài)處理模式，客戶端負(fù)責(zé)向服務(wù)器端提交瀏覽請(qǐng)求、下載具有3D可視效果的“偽3D”二維數(shù)據(jù)，服務(wù)器端負(fù)責(zé)三維渲染任務(wù)，根據(jù)請(qǐng)求實(shí)時(shí)投影為二維圖像，并在客戶端搭建偽3D交互坐標(biāo)/視角變換模型，結(jié)合JS+HTML技術(shù)，實(shí)現(xiàn)客戶端偽3D交互。這種方法無須特定的操作系統(tǒng)和硬件設(shè)備，即可以純凈網(wǎng)頁載體實(shí)現(xiàn)三維影像可視化瀏覽。

周陽等人的三維模型主要用于反映水利場(chǎng)景的地理環(huán)境特點(diǎn)，不能表達(dá)出水質(zhì)特征。高鵬、喬梁等人生成的三維影像主要應(yīng)用于醫(yī)學(xué)圖像，但這種以服務(wù)器為中心的建模思想可以應(yīng)用到水體數(shù)據(jù)的可視化上。

3? ?解決方案（Solution）

在水域中放置若干個(gè)水質(zhì)儀對(duì)水體數(shù)據(jù)進(jìn)行采樣。水質(zhì)儀從0深度開始，豎直向下運(yùn)動(dòng)直到深度不再變化，并在運(yùn)動(dòng)過程中每隔一定的距離對(duì)所在位置的水體相關(guān)數(shù)據(jù)進(jìn)行采樣和記錄。采樣數(shù)據(jù)包括該樣本點(diǎn)的經(jīng)緯度坐標(biāo)、水深和多種水質(zhì)數(shù)據(jù)：溫度、飽和度、渾濁度、pH、ECus、ORP、Chla、DOmg、Sal。在本文中，將水質(zhì)儀在同一經(jīng)緯度坐標(biāo)的不同深度測(cè)得樣本點(diǎn)的數(shù)據(jù)集稱為一個(gè)樣本條。

根據(jù)少量的樣本點(diǎn)，生成水體水平面、底面和中間部分的大量散點(diǎn)，描繪出水體的形狀。并計(jì)算每一個(gè)散點(diǎn)對(duì)應(yīng)的水質(zhì)數(shù)據(jù)，按照水質(zhì)數(shù)據(jù)對(duì)散點(diǎn)進(jìn)行顏色渲染，通過不同的顏色直觀地表現(xiàn)出水質(zhì)狀況，然后借助ECharts在Web頁面上進(jìn)行水體數(shù)據(jù)可視化展示。

3.1? ?顯示水域所在地地圖

選擇若干個(gè)樣本條，系統(tǒng)使用百度地圖API生成這些點(diǎn)所在地的地圖。首先創(chuàng)建地圖實(shí)例，然后獲取所選樣本點(diǎn)中的第一個(gè)點(diǎn)的經(jīng)緯度，將這個(gè)點(diǎn)作為地圖的中心點(diǎn)，并設(shè)置縮放級(jí)別，對(duì)地圖進(jìn)行初始化。核心代碼如下：

3.2? ?生成水體水平面散點(diǎn)

首先考慮掃描線填充算法，使用水平掃描線對(duì)地圖進(jìn)行掃描。當(dāng)掃描線掃描到綠色和藍(lán)色的交點(diǎn)時(shí)，記錄點(diǎn)的坐標(biāo)，然后將這些交點(diǎn)從左到右兩兩配對(duì)，對(duì)每一對(duì)交點(diǎn)之間的線段填充顏色。但在實(shí)際操作中，發(fā)現(xiàn)與地圖中所選水域不相連通的水域（圖2中右側(cè)的河流）也會(huì)被渲染。

后改用種子填充算法，將用戶所選的第一個(gè)樣本點(diǎn)作為種子點(diǎn)，依次訪問這個(gè)像素點(diǎn)的上下左右點(diǎn)，若為藍(lán)色，則納入水域部分，并將這些的點(diǎn)作為新的種子點(diǎn)，掃描其四周的點(diǎn)，直至水域部分被填充滿。

遍歷水域中的所有像素點(diǎn)，訪問其上下左右的像素點(diǎn)，如果它周圍的像素點(diǎn)中既有綠色的像素點(diǎn)（表示綠地），也有藍(lán)色的像素點(diǎn)（表示水域），則說明該點(diǎn)處于水域的邊界。保存這些邊界點(diǎn)的坐標(biāo)，從而找到了水域的邊界線。

然后使用掃描線填充算法，用水平線對(duì)地圖從左到右進(jìn)行掃描。保存掃描線與水域邊界線的交點(diǎn)，并將其兩兩配對(duì)，則每?jī)牲c(diǎn)之間的線段為真實(shí)的水域范圍。在線段上每隔一定的間隔取一個(gè)點(diǎn)，從而獲得了0深度處的水體散點(diǎn)。根據(jù)已知的若干點(diǎn)的水質(zhì)數(shù)據(jù)，計(jì)算該點(diǎn)的水質(zhì)數(shù)據(jù)和對(duì)應(yīng)的水體深度。

如圖3所示，設(shè)已知n個(gè)點(diǎn)的水質(zhì)數(shù)據(jù)，其中第i個(gè)點(diǎn)的水質(zhì)數(shù)據(jù)（或?qū)?yīng)的水體深度）為，距未知數(shù)據(jù)點(diǎn)的距離為，對(duì)該點(diǎn)的影響權(quán)重為。已知點(diǎn)和未知點(diǎn)的距離越近，對(duì)其的影響也就越大，而所有已知點(diǎn)對(duì)未知點(diǎn)的影響權(quán)重和為1?？傻茫?/p>

3.3? ?生成水體底部散點(diǎn)

找出每一個(gè)所選樣本條中深度最大的樣本點(diǎn)，這些點(diǎn)即為水體底面的散點(diǎn)。但只有幾個(gè)散點(diǎn)不足以描繪出水體底面的真實(shí)狀況。按照深度由大到小對(duì)這些樣本點(diǎn)進(jìn)行排序，然后將深度最大的三個(gè)點(diǎn)連為一個(gè)三角網(wǎng)格，再遍歷剩余的水體底面樣本點(diǎn);對(duì)于該點(diǎn)，遍歷已生成的所有三角網(wǎng)格，并作如下判斷：

（1）判斷該點(diǎn)的投影是否落在三角形的投影區(qū)域內(nèi)，包括三角形的邊。具體的判斷算法為：設(shè)三角形的三個(gè)頂點(diǎn)分別為A、B、C，其在底面的投影分別為A'、B'、C';需進(jìn)行判斷的點(diǎn)為D，其在底面的投影為D'。分別計(jì)算三角形A'B'C'、三角形A'B'D'、三角形A'C'D'、三角形B'C'D'的面積。若后三者的和等于三角形A'B'C'的面積，則說明點(diǎn)D的投影在三角形ABC投影的內(nèi)部。

（2）若該點(diǎn)的投影落在三角形的投影區(qū)域內(nèi)，繼續(xù)判斷該點(diǎn)的投影是否落在三角形的邊的投影上，若是，則將該點(diǎn)與三角形的另外兩條邊連成兩個(gè)三角形，并取消原來的那個(gè)三角形;若不是，則將這個(gè)點(diǎn)與三角形的三個(gè)點(diǎn)分別連成三個(gè)新的三角形，并取消原來的那個(gè)三角形。

（3）若該點(diǎn)的投影沒有落在三角形的投影區(qū)域內(nèi)，則將該點(diǎn)與三角形的三條邊分別連成三個(gè)三角形，判斷新三角形的投影是否與已有的三角網(wǎng)格重疊，并將不重疊新三角形存入三角網(wǎng)格的數(shù)組。

最終得到的水體底部三角網(wǎng)面如圖4所示。

然后借助VTK（Visualization Toolkit，即可視化工具包）對(duì)三角網(wǎng)面進(jìn)行細(xì)分。VTK是一個(gè)跨平臺(tái)的開源圖形應(yīng)用函數(shù)庫(kù)，可用于三維計(jì)算機(jī)圖形和圖像的處理。在VTK中實(shí)現(xiàn)網(wǎng)格細(xì)化的類有vtkLinearSubdivisionFilter、vtkLoopSubdivisionFilter和vtkButterflySubdivisionFilter。其中vtkButterlySsubdivisionFilter實(shí)現(xiàn)了蝶形細(xì)分算法。以對(duì)球面網(wǎng)格進(jìn)行細(xì)分為例，如圖5所示，可以看出vtkButterflysubdivisionFilter（右）能夠得到較為平滑的模型，其效果優(yōu)于vtkLinearSubdivisionfilter（左）。

使用vtkButterflySubdivisionFilter對(duì)水體底部三角網(wǎng)面進(jìn)行蝶形細(xì)分，由少量樣本點(diǎn)細(xì)分出大量散點(diǎn)，構(gòu)成水體模型的底面，使得底面更加平滑逼真。

3.4? ?生成水體內(nèi)部散點(diǎn)

對(duì)于3.2中生成的水體水平面的散點(diǎn)，在深度不超過該點(diǎn)對(duì)應(yīng)的水體深度的情況下，垂直向下每隔一定的間隔就取一個(gè)點(diǎn)，得到新的散點(diǎn)條。遍歷每一個(gè)新生成的散點(diǎn)，計(jì)算該點(diǎn)對(duì)應(yīng)的水質(zhì)數(shù)據(jù)。

首先，根據(jù)所求散點(diǎn)的深度，計(jì)算樣本條中對(duì)應(yīng)深度的點(diǎn)的水質(zhì)數(shù)據(jù)。如圖6所示，設(shè)所求點(diǎn)的水質(zhì)數(shù)據(jù)為V，其樣本條上相鄰兩點(diǎn)的水質(zhì)數(shù)據(jù)分別為V1、V2，該點(diǎn)與這兩點(diǎn)的距離分別為d1、d2。由于距離越近，受到的影響越大，水質(zhì)數(shù)據(jù)越接近，可以求得在求出所有樣本條在該深度的點(diǎn)的水質(zhì)數(shù)據(jù)后，用3.2中的根據(jù)距離關(guān)系計(jì)算水質(zhì)數(shù)據(jù)的方法，計(jì)算出所求散點(diǎn)的水質(zhì)數(shù)據(jù)。

由此，可以求得水體模型中所有點(diǎn)的水質(zhì)數(shù)據(jù)。

3.5? ?在網(wǎng)頁上顯示水體3D散點(diǎn)圖

Echarts是一個(gè)百度開源的、使用純JavaScript實(shí)現(xiàn)的可視化庫(kù)，它提供了豐富的API接口和文檔[7]?？梢愿鶕?jù)需求，結(jié)合后臺(tái)傳送的相關(guān)數(shù)據(jù)，修改圖表代碼，展示出所需的效果。

在本文中，后臺(tái)以字符串的形式將所有散點(diǎn)的坐標(biāo)和水質(zhì)數(shù)據(jù)傳到前端，由前端將字符串分割并寫入數(shù)組，數(shù)組的形式為[經(jīng)度，緯度，水深，水質(zhì)數(shù)據(jù)]。根據(jù)前三個(gè)元素可以確定散點(diǎn)在三維空間中的位置，利用Echarts 3D把散點(diǎn)一一描繪出來，得到水體的三維形態(tài)。然后使用視覺映射組件visualMap對(duì)散點(diǎn)進(jìn)行顏色渲染。分別定義水質(zhì)數(shù)據(jù)的最小、最大值對(duì)應(yīng)的顏色，visualMap會(huì)自動(dòng)根據(jù)散點(diǎn)的水質(zhì)數(shù)據(jù)的大小，對(duì)其進(jìn)行顏色渲染。

4? ?實(shí)驗(yàn)（Experiment）

在普通的家庭網(wǎng)絡(luò)環(huán)境下，使用Win10系統(tǒng)的PC計(jì)算機(jī)，在Chrome網(wǎng)頁選取三個(gè)樣本條（包含591個(gè)數(shù)據(jù)點(diǎn)，每個(gè)數(shù)據(jù)點(diǎn)包含該點(diǎn)的經(jīng)度、緯度、深度和9個(gè)水質(zhì)數(shù)據(jù)），對(duì)溫州馬鞍池公園水域使用本文提出的算法進(jìn)行測(cè)試，只需7s即可獲取從后端計(jì)算所得的16319個(gè)數(shù)據(jù)點(diǎn)（共195828個(gè)數(shù)據(jù)），并生成對(duì)應(yīng)的四維水體模型。如圖7—圖10所示，生成的水體模型形狀逼真，顏色渲染清晰，在網(wǎng)頁上可流暢地對(duì)該模型進(jìn)行縮放、角度變換等瀏覽操作、可清楚明了地看到某一點(diǎn)具體的水質(zhì)數(shù)據(jù)。

5? ?結(jié)論（Conclusion）

本文在對(duì)現(xiàn)有的水體數(shù)據(jù)可視化研究進(jìn)行了比較與總結(jié)后，設(shè)計(jì)了一種可以快速將水體的各類復(fù)雜數(shù)據(jù)及其間的數(shù)據(jù)關(guān)系通過可視化的方式展示出來的算法，對(duì)水質(zhì)儀采集到的數(shù)據(jù)，通過對(duì)經(jīng)緯度、深度和水質(zhì)指標(biāo)（包括pH值、水溫、葉綠素等七個(gè)）四個(gè)維度進(jìn)行建模，并借助ECharts在Web頁面上進(jìn)行水體數(shù)據(jù)可視化展示，不依賴于任何的平臺(tái)，以及其他相關(guān)的平臺(tái)插件，即可讓分析人員快速了解、掌握水體的總體和局部情況，為水環(huán)境治理決策提供直觀、科學(xué)的依據(jù)。

參考文獻(xiàn)（References）

[1] 周志光，石晨，史林松，等.地理空間數(shù)據(jù)可視分析綜述[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2018，30（05）：747-763.

[2] 任東懷，胡俊.多維數(shù)據(jù)可視化技術(shù)綜述[J].工程地質(zhì)計(jì)算機(jī)應(yīng)用，2006（04）：4-9;34

[3] 劉兆明，郭景，柯永振.面向Web的遠(yuǎn)程圖像可視化系統(tǒng)的研制[J].計(jì)算機(jī)應(yīng)用與軟件，2018，35（06）：190-196;262.

[4] 周陽，佘江峰，唐一鳴.基于WebGL的三維數(shù)字水利展示系統(tǒng)研究[J].測(cè)繪與空間地理信息，2014，37（03）：44-48.

[5] 高鵬，劉鵬，蘇紅森，等.基于HTML5與可視化工具包的醫(yī)學(xué)影像三維重建及交互方法研究[J].生物醫(yī)學(xué)工程學(xué)雜志，2015，32（02）：336-342.

[6] 喬梁，陳欣，楊磊鑫，等.基于純凈Web的醫(yī)學(xué)影像三維可視化平臺(tái)的研制[J].北京生物醫(yī)學(xué)工程，2015，34（03）：229-233;286.

[7] 黃宇棟.百度Echarts在數(shù)據(jù)可視化分析中的應(yīng)用[J].金融科技時(shí)代，2018（06）：43-45.