王夢珂 黃少捷 任富彬

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

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

中圖分類號：TP311.5? ? ?文獻標識碼：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è)不斷健全，人們對居住環(huán)境的質(zhì)量的關(guān)注也與日俱增。水環(huán)境的質(zhì)量便是環(huán)境質(zhì)量的重要組成部分。水體與人們的生活息息相關(guān)，水質(zhì)信息化的需求日益增加。

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

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

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

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

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

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

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

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

3? ?解決方案（Solution）

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

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

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

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

3.2? ?生成水體水平面散點

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

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

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

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

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

3.3? ?生成水體底部散點

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4? ?實驗（Experiment）

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

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

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

參考文獻（References）

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

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

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

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

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

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

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