集成空間信息的大屏幕展示系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)
——以第二次全國污染源普查展示系統(tǒng)為例

王惠杰 吳 悠 吳靜陽 孟海軍

(自然資源部第一航測遙感院 陜西西安 710054)

隨著大數(shù)據(jù)時(shí)代的到來，越來越多的領(lǐng)域開始重視數(shù)據(jù)的價(jià)值。但是要對數(shù)據(jù)的潛在價(jià)值進(jìn)行挖掘和分析，離不開可視化工具的支持。大屏幕展示系統(tǒng)指在大型的拼接屏幕上，用統(tǒng)計(jì)圖表、電子地圖等可視化形式，對數(shù)據(jù)進(jìn)行多維度展示的系統(tǒng)。它的優(yōu)勢在于借助大屏幕，以生動(dòng)直觀的可視化效果全面展示數(shù)據(jù)的統(tǒng)計(jì)信息、時(shí)空變化與分布規(guī)律等，使用戶可以一目了然地掌握數(shù)據(jù)特征，為數(shù)據(jù)的進(jìn)一步挖掘與分析奠定基礎(chǔ)。

全國污染源普查是重大的國情調(diào)查，是環(huán)境保護(hù)的基礎(chǔ)性工作。第二次全國污染源普查對工業(yè)源、農(nóng)業(yè)源、生活源、移動(dòng)源和集中式污染處理處置場所等5類污染源進(jìn)行了詳細(xì)的調(diào)查，對于準(zhǔn)確判斷我國當(dāng)前環(huán)境形勢，制定實(shí)施有針對性的經(jīng)濟(jì)社會(huì)發(fā)展和環(huán)境保護(hù)政策、規(guī)劃，不斷改善環(huán)境質(zhì)量，加快推進(jìn)生態(tài)文明建設(shè)，補(bǔ)齊全面建成小康社會(huì)的生態(tài)環(huán)境短板具有重要意義。第二次全國污染源普查不僅形成了大量的統(tǒng)計(jì)數(shù)據(jù)，而且各類污染源又有了豐富的地理位置信息，如自身位置、所屬各級(jí)行政區(qū)劃、污染排放的受納水體等。因此，第二次全國污染源普查成果具有內(nèi)容豐富、數(shù)據(jù)結(jié)構(gòu)多樣等特點(diǎn)。為了全面而準(zhǔn)確地描述污染源的整體趨勢與細(xì)節(jié)特征，需借助大屏幕展示系統(tǒng)將抽象的數(shù)字具象化。針對第二次全國污染源普查成果數(shù)據(jù)蘊(yùn)含豐富的空間位置信息，本文提出一種集成地理信息的數(shù)據(jù)綜合聯(lián)動(dòng)展示系統(tǒng)。該系統(tǒng)以承載空間信息的地圖為窗口，將各類統(tǒng)計(jì)數(shù)據(jù)與污染源位置信息掛接起來，在查看污染源空間分布情況的同時(shí)，聯(lián)動(dòng)展示各個(gè)維度的數(shù)值特征，以便更好地發(fā)現(xiàn)普查成果數(shù)據(jù)的內(nèi)在規(guī)律與趨勢。

1 系統(tǒng)設(shè)計(jì)及實(shí)現(xiàn)

1.1 系統(tǒng)需求分析

第二次全國污染源普查從污染源的基本信息、治理設(shè)施基本信息、污染物排放情況、原料使用情況、空間位置信息等角度，對每個(gè)污染源進(jìn)行了詳細(xì)調(diào)查，將展示內(nèi)容分為區(qū)域整體情況展示和單個(gè)污染源信息展示兩種。

區(qū)域整體情況展示，是指按照一定的空間區(qū)劃，如行政區(qū)劃(國家、省、地市等)或其他區(qū)劃(如按流域劃分、按文化習(xí)俗圈劃分)，展現(xiàn)各類污染源及次級(jí)類(如工業(yè)污染源可按企業(yè)規(guī)模劃分為大型企業(yè)、中型企業(yè)、小型企業(yè)和微型企業(yè))的數(shù)量、污染源點(diǎn)位空間分布、主要污染源類別及排放量、產(chǎn)品類別及產(chǎn)量等指標(biāo)項(xiàng)。因此，需要根據(jù)第二次全國污染源普查成果數(shù)據(jù)對空間區(qū)劃內(nèi)的所有污染源按指標(biāo)項(xiàng)分類匯總進(jìn)行展示。

單個(gè)污染源信息展示，是指在較小的空間區(qū)劃范圍(如地市范圍)內(nèi)，查看單個(gè)污染源的信息，包括污染物、產(chǎn)品、污染源的地名地址和法人等調(diào)查信息。

這兩類展示內(nèi)容中，污染源空間分布信息可用地圖來展示，數(shù)值信息可用統(tǒng)計(jì)圖表來展示，同時(shí)，還要實(shí)現(xiàn)地圖與圖表的聯(lián)動(dòng)，即地圖上選中某一區(qū)域或某個(gè)污染源，圖表就能切換到該區(qū)域或該污染源的統(tǒng)計(jì)數(shù)據(jù)。

1.2 系統(tǒng)架構(gòu)設(shè)計(jì)

集成地理信息的數(shù)據(jù)綜合聯(lián)動(dòng)展示系統(tǒng)采用瀏覽器/服務(wù)器架構(gòu)，由數(shù)據(jù)層、服務(wù)層和用戶層構(gòu)成。其中，數(shù)據(jù)層包括了系統(tǒng)要展示的普查統(tǒng)計(jì)數(shù)據(jù)與空間數(shù)據(jù)，服務(wù)層提供GIS服務(wù)(底圖服務(wù)、專題地圖服務(wù)和空間查詢服務(wù)等)、數(shù)據(jù)庫服務(wù)(查詢與統(tǒng)計(jì)服務(wù)等)和其他服務(wù)(數(shù)據(jù)格式轉(zhuǎn)換服務(wù)等)，用戶層是用于展示和操作數(shù)據(jù)的前端界面。集成地理信息的數(shù)據(jù)綜合聯(lián)動(dòng)展示系統(tǒng)的架構(gòu)如圖1所示。

圖1 數(shù)據(jù)綜合聯(lián)動(dòng)展示系統(tǒng)架構(gòu)Fig.1 Architecture of Data Integrated Linkage Display System

1.3 系統(tǒng)界面設(shè)計(jì)

系統(tǒng)界面采用如下布局：每類污染源一個(gè)頁面，每個(gè)頁面分左、中、右3個(gè)大板塊，其中左右板塊設(shè)置為展示數(shù)值特征的圖表，中間板塊相比左右板塊較大，用于展示基礎(chǔ)電子地圖與污染源的空間分布信息。每類污染源的展示內(nèi)容不同，因此可根據(jù)展示內(nèi)容對局部板塊進(jìn)行調(diào)整，但總體布局均以地圖為視覺中心，統(tǒng)計(jì)圖表環(huán)繞四周。

1.4 系統(tǒng)功能設(shè)計(jì)

1.4.1 圖表展示模塊

圖表展示模塊將污染源數(shù)量、產(chǎn)品種類與數(shù)量、污染物種類及排放量等統(tǒng)計(jì)數(shù)據(jù)，以柱狀圖、餅狀圖、折線圖和數(shù)字牌等各類圖表形式展示在相應(yīng)板塊中。圖表形式可根據(jù)統(tǒng)計(jì)信息的特點(diǎn)確定，例如，需要表示各部分在總體的占比，則使用餅狀圖表；需要表示某一類量由若干分量組成，則使用堆疊的柱狀圖；需要表示同一區(qū)域或同一污染源幾項(xiàng)指標(biāo)的對比，則使用柱狀組圖；需要表示隨時(shí)間變化的趨勢，則使用折線圖。

另外，圖表本身也具備交互功能，例如，點(diǎn)擊圖例除展示該項(xiàng)數(shù)據(jù)外，還能動(dòng)態(tài)計(jì)算剩余數(shù)據(jù)組各自的占比；將鼠標(biāo)懸停在圖表中某個(gè)數(shù)據(jù)組上，就能展示該組數(shù)據(jù)的詳細(xì)信息等。圖表展示模塊樣例如圖2所示。

圖2 圖表樣例Fig.2 Sample Chart

1.4.2 空間信息展示模塊

空間信息展示模塊以電子地圖的形式在基礎(chǔ)地理底圖上疊加展示各類污染源的空間點(diǎn)位分布情況(見圖3)，如果縮放到省級(jí)及以上級(jí)別只顯示該行政區(qū)劃總的污染源數(shù)量；如果縮放到地市以下級(jí)別，直接顯示全部污染源點(diǎn)位的空間分布。該模塊提供了圖層切換與開閉功能，可查看各類污染源次級(jí)類的分布情況。

圖3 污染源點(diǎn)位空間分布示例Fig.3 Example of Pollution Sources Spatial Distribution

1.4.3 聯(lián)動(dòng)瀏覽模塊

聯(lián)動(dòng)瀏覽模塊以地圖為操作入口，實(shí)現(xiàn)各類污染源信息的聯(lián)動(dòng)展示與瀏覽。通過點(diǎn)擊不同區(qū)域(如不同地市)或者單個(gè)污染源，可以將該區(qū)域的統(tǒng)計(jì)匯總信息或者該污染源的污染物排放信息切換展示在其他圖表板塊中，同時(shí)，還能針對單個(gè)污染源，以地圖彈框的形式展示其他詳細(xì)信息。污染源查詢圖示例如圖4所示。

圖4 污染源查詢圖示例Fig.4 Example of Pollution Source Query Graph

1.5 系統(tǒng)實(shí)現(xiàn)

系統(tǒng)采用了瀏覽器/服務(wù)器架構(gòu)，從數(shù)據(jù)庫、服務(wù)器端和瀏覽器端三方面闡述其實(shí)現(xiàn)過程。

1.5.1 數(shù)據(jù)庫

污染源普查時(shí)采用表格的形式記錄了污染源各個(gè)維度的信息，可采用關(guān)系型數(shù)據(jù)庫存儲(chǔ)，因此按照關(guān)系型數(shù)據(jù)庫的范式要求對各個(gè)表格進(jìn)行拆分、關(guān)聯(lián)。同時(shí)考慮到空間索引、空間操作函數(shù)的需求，系統(tǒng)最終采用了Oracle 11g版本數(shù)據(jù)庫。該版本支持Oracle Spatial組件操作空間數(shù)據(jù)。

1.5.2 服務(wù)器端

系統(tǒng)的核心功能是數(shù)據(jù)展示，業(yè)務(wù)流較為簡單，并發(fā)壓力不大，因此系統(tǒng)直接采用Tomcat作為網(wǎng)頁服務(wù)器。系統(tǒng)集成了影像和線劃底圖、五類污染源專題地圖等地圖服務(wù)，采用開源Geoserver作為地圖服務(wù)器。系統(tǒng)的集成開發(fā)環(huán)境為Eclipse。

1.5.3 瀏覽器端

系統(tǒng)的板塊化界面設(shè)計(jì)依賴于各類圖表組件的復(fù)用，因此采用vue.js作為前端總體框架；采用Openlayers3作為地圖框架，實(shí)現(xiàn)地圖的加載、瀏覽與交互操作；采用Echarts作為圖表可視化框架。系統(tǒng)集成開發(fā)環(huán)境為VS code。

2 系統(tǒng)實(shí)現(xiàn)的關(guān)鍵技術(shù)

2.1 前端漸進(jìn)式框架

通常，展示系統(tǒng)的前端設(shè)計(jì)是不斷迭代完善的，這意味著頁面的整體布局、板塊所采用的圖表形式會(huì)不斷更換。為了降低這種變化對整個(gè)系統(tǒng)研發(fā)的影響，集成地理信息的數(shù)據(jù)綜合聯(lián)動(dòng)展示系統(tǒng)的前端采用了vue.js。vue.js是一種漸進(jìn)式框架，它將HTML5+CSS+JAVASCRIPT整合成一個(gè)vue文件，稱之為組件，只需在其他頁面中引用該vue文件即可實(shí)現(xiàn)該組件的復(fù)用。vue.js的特點(diǎn)是組件化與數(shù)據(jù)綁定。

首先在集成地理信息的數(shù)據(jù)綜合聯(lián)動(dòng)展示系統(tǒng)中，將不同類型、樣式的圖表制作成vue組件，可在不同板塊中引用，避免了重復(fù)開發(fā)。其次，這種組件化可降低系統(tǒng)的耦合程度，板塊的變化只是對若干組件的更改或替換，不影響系統(tǒng)整體運(yùn)行。此外，vue可實(shí)現(xiàn)視圖控件與數(shù)據(jù)的綁定，通過切換數(shù)據(jù)自動(dòng)實(shí)現(xiàn)相應(yīng)視圖的更新。因此，在集成地理信息的數(shù)據(jù)綜合聯(lián)動(dòng)展示系統(tǒng)中只需在地圖點(diǎn)擊事件中切換數(shù)據(jù)源，而不必操作網(wǎng)頁的文檔對象模型(Document Object Model)，相應(yīng)的視圖就會(huì)發(fā)生變化，從而實(shí)現(xiàn)點(diǎn)擊地圖就可以切換展示不同區(qū)域的數(shù)據(jù)。

2.2 大屏幕適配

大屏幕通常是由若干小屏幕拼接而成，但是受場地或其他條件限制，拼接屏的長寬比、分辨率與開發(fā)系統(tǒng)使用的計(jì)算機(jī)屏幕可能并不一致。因此在界面設(shè)計(jì)時(shí)，需要注意以下幾點(diǎn)：

1)各板塊的長寬尺寸需要以大屏幕為基準(zhǔn)，避免圖表“變形”；

2)盡量讓屏幕的拼接縫處于板塊的銜接處或空白處；

3)通過調(diào)整投影方式來消除由于分辨率差別引起的地圖“變形”。

例如，在CGCS2000球面坐標(biāo)系中，當(dāng)行政邊界具有明顯的南北長東西窄的幾何特征時(shí)，如果拼接屏的分辨率較低，顯示時(shí)就可能會(huì)拉伸東西向的寬度。消除這種幾何特征會(huì)給人一種地圖“變形”或者“不夠準(zhǔn)確”的錯(cuò)覺。這時(shí)通過選擇合適的投影坐標(biāo)系，就能在拼接屏上保持原有的幾何特征，消除地圖“變形”或者“不夠準(zhǔn)確”的錯(cuò)覺。

2.3 匯總統(tǒng)計(jì)信息展示

集成地理信息的數(shù)據(jù)綜合聯(lián)動(dòng)展示系統(tǒng)的匯總統(tǒng)計(jì)信息展示，首先在頁面加載時(shí)，根據(jù)給定指標(biāo)向服務(wù)器請求數(shù)據(jù)，然后瀏覽器接收數(shù)據(jù)并展示在對應(yīng)的板塊中。

請求數(shù)據(jù)時(shí)，由于每類污染源、每個(gè)板塊要展示的匯總統(tǒng)計(jì)信息是事先確定好的，因此，可以預(yù)先編寫查詢語句，在頁面首次初始化時(shí)向服務(wù)器發(fā)送獲取數(shù)據(jù)的請求。考慮到第二次全國污染源普查結(jié)束后，數(shù)據(jù)庫的數(shù)據(jù)將作為本底數(shù)據(jù)，也不需要實(shí)時(shí)更新，因此，可對首次查詢的結(jié)果進(jìn)行緩存處理，在頁面加載時(shí)直接讀取緩存文件即可。一旦數(shù)據(jù)庫的數(shù)據(jù)發(fā)生了變化，就需重新進(jìn)行查詢操作，更新緩存結(jié)果。

展示數(shù)據(jù)時(shí)，由于Echarts對柱狀圖、折線圖、餅狀圖等不同圖表的數(shù)據(jù)格式要求不同，因此，需要編寫腳本將查詢結(jié)果數(shù)據(jù)轉(zhuǎn)換為各類圖表格式。

2.4 污染源點(diǎn)位展示與查詢

通常展示系統(tǒng)要求實(shí)現(xiàn)污染源點(diǎn)位“能看能查”，即在將所有污染源的點(diǎn)位展示在地圖上的同時(shí)，還可以通過點(diǎn)擊位置來查看相應(yīng)污染源的信息。網(wǎng)絡(luò)要素服務(wù)(WFS)對于數(shù)量較少的污染源，可滿足展示與查詢的要求，但是對于每類污染源點(diǎn)位數(shù)量都有幾萬個(gè)的重點(diǎn)污染源，發(fā)布成網(wǎng)絡(luò)要素服務(wù)后非?？D，效率極低。

集成地理信息的數(shù)據(jù)綜合聯(lián)動(dòng)展示系統(tǒng)中采用“地圖瓦片+數(shù)據(jù)庫空間查詢”的解決方案，即將污染源點(diǎn)位發(fā)布成符合開放地理空間信息聯(lián)盟(OGC)標(biāo)準(zhǔn)的地圖瓦片服務(wù)(WMTS)，以滿足幾萬個(gè)點(diǎn)位同時(shí)展示的性能要求；同時(shí)，在Oracle數(shù)據(jù)庫中針對每類污染源建立空間索引，當(dāng)在地圖上用鼠標(biāo)點(diǎn)擊污染源位置進(jìn)行空間查詢時(shí)，使用Oracle Spatial的SDO_WITHIN_DISTANCE語句，就可以根據(jù)點(diǎn)擊位置的實(shí)際坐標(biāo)，從數(shù)據(jù)庫中查詢到對應(yīng)的污染源，進(jìn)而獲取并展示其基本信息。

3 結(jié) 語

在大數(shù)據(jù)時(shí)代，大屏幕展示系統(tǒng)越來越成為全面展現(xiàn)數(shù)據(jù)特征的重要可視化工具?？臻g信息既是其核心的展示內(nèi)容，同時(shí)也是聯(lián)動(dòng)展示其他信息的抓手。

本文以第二次全國污染源普查展示系統(tǒng)為例，提出了一種集成空間信息的大屏幕展示系統(tǒng)的技術(shù)解決方案，通過采用漸進(jìn)式框架、數(shù)據(jù)庫空間索引、數(shù)據(jù)庫查詢優(yōu)化等框架與技術(shù)，解決了大屏幕展示系統(tǒng)中大量空間數(shù)據(jù)的展示與查詢、匯總統(tǒng)計(jì)信息的高效查詢與可視化、數(shù)據(jù)聯(lián)動(dòng)展示等問題，其技術(shù)設(shè)計(jì)與實(shí)現(xiàn)具有一定的典型性。下一步將研究三維場景下的地理信息聯(lián)動(dòng)展示以及系統(tǒng)數(shù)據(jù)的實(shí)時(shí)更新等技術(shù)內(nèi)容。