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

王夢珂 黃少捷 任富彬

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

關鍵詞：水質數據;四維可視化;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）

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

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

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

2? ?相關工作（Related work）

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

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

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

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

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

3? ?解決方案（Solution）

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

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

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

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

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

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

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

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

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

如圖3所示，設已知n個點的水質數據，其中第i個點的水質數據（或對應的水體深度）為，距未知數據點的距離為，對該點的影響權重為。已知點和未知點的距離越近，對其的影響也就越大，而所有已知點對未知點的影響權重和為1。可得：

3.3? ?生成水體底部散點

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

（1）判斷該點的投影是否落在三角形的投影區域內，包括三角形的邊。具體的判斷算法為：設三角形的三個頂點分別為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投影的內部。

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

（3）若該點的投影沒有落在三角形的投影區域內，則將該點與三角形的三條邊分別連成三個三角形，判斷新三角形的投影是否與已有的三角網格重疊，并將不重疊新三角形存入三角網格的數組。

最終得到的水體底部三角網面如圖4所示。

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

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

3.4? ?生成水體內部散點

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

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

由此，可以求得水體模型中所有點的水質數據。

3.5? ?在網頁上顯示水體3D散點圖

Echarts是一個百度開源的、使用純JavaScript實現的可視化庫，它提供了豐富的API接口和文檔[7]。可以根據需求，結合后臺傳送的相關數據，修改圖表代碼，展示出所需的效果。

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

4? ?實驗（Experiment）

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

5? ?結論（Conclusion）

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

參考文獻（References）

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

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

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

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

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

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

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