金煜現(xiàn)，朱永杰

(北京林業(yè)大學(xué)經(jīng)濟(jì)管理學(xué)院，北京 100083)

隨著我國大力發(fā)展林業(yè)信息化建設(shè)，林業(yè)信息資源逐漸豐富，如何更好地利用林業(yè)數(shù)據(jù)成了重點課題。國家林業(yè)局2009年頒發(fā)的《全國林業(yè)信息化建設(shè)綱要》[1]提出，要加快林業(yè)信息服務(wù)的發(fā)展，以林業(yè)數(shù)據(jù)促進(jìn)林業(yè)決策科學(xué)化，而《全國林業(yè)信息化建設(shè)技術(shù)指南》[2]把可視化技術(shù)列為林業(yè)信息化發(fā)展的核心技術(shù)之一?？梢暬夹g(shù)得到如此重視是因為它能夠向用戶提供一個高效的可視化環(huán)境，輔助用戶對數(shù)據(jù)進(jìn)行深層次的挖掘，不斷找出數(shù)據(jù)的特征，以及內(nèi)在的聯(lián)系與規(guī)律[3]。《全國林業(yè)信息化建設(shè)技術(shù)指南》[2]還指出，以林業(yè)信息查詢、分析、統(tǒng)計等業(yè)務(wù)為主的應(yīng)用適合采用瀏覽器/服務(wù)器架構(gòu)進(jìn)行開發(fā)，而以林業(yè)數(shù)據(jù)處理為主的應(yīng)用適合采用客戶端/服務(wù)器架構(gòu)進(jìn)行開發(fā)。由此可見，瀏覽器/服務(wù)器架構(gòu)的林業(yè)數(shù)據(jù)可視化應(yīng)用研究是林業(yè)信息服務(wù)建設(shè)的重要發(fā)展方向之一。

近年來，我國對林業(yè)可視化技術(shù)的研究成果主要集中在特定區(qū)域或特定主題的可視化研究上[4]，例如李永亮等[5]提出了林分三維模型實時生成方法，閆楊[6]研究了可視化信息網(wǎng)絡(luò)基礎(chǔ)平臺在森林防火中的應(yīng)用，劉海等[7]研究了果子溝林場的三維建模與可視化實現(xiàn)，而對林業(yè)整體宏觀環(huán)境的統(tǒng)計數(shù)據(jù)可視化研究較少，有程志強等[8]基于MVC模式設(shè)計的林業(yè)統(tǒng)計數(shù)據(jù)可視化系統(tǒng)以及魯東民等[4]基于網(wǎng)絡(luò)地理信息系統(tǒng)設(shè)計的林業(yè)資源統(tǒng)計數(shù)據(jù)可視化系統(tǒng)，這些系統(tǒng)設(shè)計提前把林業(yè)統(tǒng)計數(shù)據(jù)和與之匹配的空間數(shù)據(jù)存儲在數(shù)據(jù)庫內(nèi)，再根據(jù)用戶的需求進(jìn)行可視化呈現(xiàn)。為了進(jìn)一步降低林業(yè)數(shù)據(jù)可視化系統(tǒng)對內(nèi)部可視化材料的要求，并減少林業(yè)統(tǒng)計數(shù)據(jù)的可視化系統(tǒng)開發(fā)成本，本文提出從系統(tǒng)外部自動匹配空間數(shù)據(jù)，并對多種林業(yè)統(tǒng)計數(shù)據(jù)源具有較高兼容性和通用性的可視化方案。系統(tǒng)內(nèi)部只存有林業(yè)統(tǒng)計數(shù)據(jù)，通過前端接入API和插件自動為林業(yè)統(tǒng)計數(shù)據(jù)匹配空間數(shù)據(jù)并獲取地圖底圖、可視化圖表等可視化材料。此方案的優(yōu)點是系統(tǒng)內(nèi)部僅需要林業(yè)統(tǒng)計數(shù)據(jù)就可以實現(xiàn)可視化，在保證可視化效果的情況下對系統(tǒng)內(nèi)部的數(shù)據(jù)門檻較低，并且對統(tǒng)計單位為省、縣、市、區(qū)等行政區(qū)域的林業(yè)統(tǒng)計數(shù)據(jù)具有普遍兼容性，該方案對多種林業(yè)統(tǒng)計數(shù)據(jù)的可視化系統(tǒng)搭建具有較高的復(fù)用性和參考價值。

本文選取2007—2014年《中國林業(yè)產(chǎn)業(yè)及林產(chǎn)品年鑒》[9]中的林產(chǎn)品產(chǎn)量數(shù)據(jù)為例，說明系統(tǒng)設(shè)計并展示系統(tǒng)效果。該統(tǒng)計年鑒記載著我國各類林產(chǎn)品的主要縣級生產(chǎn)地及各產(chǎn)地的產(chǎn)量，其數(shù)據(jù)統(tǒng)計單位為縣級行政區(qū)，故該數(shù)據(jù)符合本可視化方案的適用條件。

1 系統(tǒng)設(shè)計

林業(yè)統(tǒng)計數(shù)據(jù)可視化系統(tǒng)架構(gòu)如圖1所示，系統(tǒng)采用瀏覽器/服務(wù)器架構(gòu)，整體呈現(xiàn)網(wǎng)絡(luò)應(yīng)用常見的三層結(jié)構(gòu)，從頂層到底層依次為數(shù)據(jù)存儲層、業(yè)務(wù)處理層和前端交互層。數(shù)據(jù)存儲層處在系統(tǒng)的頂端，主要發(fā)生在數(shù)據(jù)庫之中，該層負(fù)責(zé)存儲數(shù)據(jù)源并按照業(yè)務(wù)處理層發(fā)出的查詢指令進(jìn)行數(shù)據(jù)查詢；業(yè)務(wù)處理層處在系統(tǒng)的中部，主要發(fā)生在服務(wù)器上，該層負(fù)責(zé)按照預(yù)定的邏輯對前端交互層發(fā)出的請求進(jìn)行處理和響應(yīng)，這些邏輯處理支撐著整個可視化系統(tǒng)的運轉(zhuǎn)；前端交互層處在系統(tǒng)的底端，主要發(fā)生在用戶使用的瀏覽器上，該層負(fù)責(zé)整個系統(tǒng)面向用戶的輸入與輸出，即用戶通過前端交互層向系統(tǒng)輸入自己的可視化數(shù)據(jù)需求，系統(tǒng)通過前端交互層向用戶輸出可視化數(shù)據(jù)。

系統(tǒng)完成一次數(shù)據(jù)可視化工作的具體流程：第一步，用戶在瀏覽器上輸入自己的可視化需求并請求可視化數(shù)據(jù)，此時前端瀏覽器會把用戶需求轉(zhuǎn)換成參數(shù)，并把附帶這些參數(shù)的HTTP請求發(fā)送至服務(wù)器。第二步，服務(wù)器識別到前端發(fā)出的請求，根據(jù)請求中附帶的參數(shù)構(gòu)建結(jié)構(gòu)化查詢語句，把構(gòu)建好的查詢命令發(fā)送至數(shù)據(jù)庫。第三步，數(shù)據(jù)庫接收到服務(wù)器發(fā)出的查詢命令，根據(jù)命令在庫內(nèi)進(jìn)行數(shù)據(jù)查詢工作，工作完成之后把查詢結(jié)果返回至服務(wù)器。第四步，服務(wù)器接收到數(shù)據(jù)庫返回的查詢結(jié)果，把這些數(shù)據(jù)封裝進(jìn)前端頁面代碼之中，把整個前端頁面代碼發(fā)送至前端瀏覽器。第五步，用戶使用的瀏覽器接收到服務(wù)器發(fā)出的前端頁面代碼，瀏覽器對代碼進(jìn)行解析并把頁面呈現(xiàn)給用戶。

圖1 系統(tǒng)架構(gòu)

1.1 數(shù)據(jù)存儲層設(shè)計

數(shù)據(jù)存儲層負(fù)責(zé)林業(yè)統(tǒng)計數(shù)據(jù)源的存儲和查詢，本文使用MySQL數(shù)據(jù)庫作為數(shù)據(jù)存儲工具。數(shù)據(jù)庫內(nèi)存儲著2007—2014年《中國林業(yè)產(chǎn)業(yè)及林產(chǎn)品年鑒》中的林產(chǎn)品產(chǎn)量數(shù)據(jù)，具體數(shù)據(jù)內(nèi)容為我國每年各類林產(chǎn)品的主要縣級生產(chǎn)地及各產(chǎn)地的產(chǎn)量。該數(shù)據(jù)源有年份、林產(chǎn)品種類、縣級生產(chǎn)地、生產(chǎn)量等字段，可供用戶從多個維度進(jìn)行數(shù)據(jù)分析工作。用戶可從年份維度進(jìn)行分析，對產(chǎn)量數(shù)據(jù)的時間序列特征進(jìn)行重點挖掘；也可從林產(chǎn)品種類維度進(jìn)行分析，對不同林產(chǎn)品的產(chǎn)量占比特點進(jìn)行挖掘；還可從縣級生產(chǎn)地維度進(jìn)行分析，對產(chǎn)量數(shù)據(jù)的空間分布特征進(jìn)行挖掘。

為了對各種形式的可視化需求進(jìn)行快速反應(yīng)，本設(shè)計提前對《中國林業(yè)產(chǎn)業(yè)及林產(chǎn)品年鑒》中的林產(chǎn)品產(chǎn)量數(shù)據(jù)進(jìn)行了一定的格式加工，從年份、林產(chǎn)品種類、縣級生產(chǎn)地3個維度重新進(jìn)行了制表處理，避免數(shù)據(jù)存儲層在實際運行中進(jìn)行低效率的數(shù)據(jù)查詢。

1.2 業(yè)務(wù)處理層設(shè)計

業(yè)務(wù)處理層負(fù)責(zé)整個系統(tǒng)的主要運行邏輯，本文的業(yè)務(wù)處理層是基于Java語言的Web項目，使用Windows Server作為服務(wù)器，配合TomCat作為JavaWeb項目的容器。把JSP、Servlet等JavaWeb項目部署在服務(wù)器上的TomCat容器中，JavaWeb項目就可以在客戶端向服務(wù)器發(fā)出HTTP請求時進(jìn)行響應(yīng)。

業(yè)務(wù)處理層需要構(gòu)建完善的結(jié)構(gòu)化查詢語句構(gòu)建方法。前端交互層向業(yè)務(wù)處理層發(fā)出的HTTP請求都會附帶著若干個參數(shù)，這些參數(shù)定義著用戶指定的可視化維度及具體年份、林產(chǎn)品種類、縣級生產(chǎn)地等變量，業(yè)務(wù)處理層需要對這些參數(shù)進(jìn)行分析并構(gòu)建相應(yīng)的結(jié)構(gòu)化查詢語句。故業(yè)務(wù)處理層需要布置完善的結(jié)構(gòu)化查詢語句構(gòu)造方法，這些方法能夠?qū)崿F(xiàn)從HTTP請求參數(shù)到結(jié)構(gòu)化查詢語句的轉(zhuǎn)化。

除此之外，業(yè)務(wù)處理層需要把數(shù)據(jù)封裝進(jìn)前端頁面代碼。數(shù)據(jù)存儲層根據(jù)結(jié)構(gòu)化查詢語句進(jìn)行數(shù)據(jù)查詢的結(jié)果是系統(tǒng)滿足用戶可視化需求所必須的數(shù)據(jù)，業(yè)務(wù)處理層需要把這些數(shù)據(jù)封裝進(jìn)前端頁面代碼并發(fā)送至前端交互層，所以業(yè)務(wù)處理層需要實現(xiàn)數(shù)據(jù)封裝功能。

1.3 前端交互層設(shè)計

前端交互層負(fù)責(zé)接收用戶的可視化需求并向用戶呈現(xiàn)可視化數(shù)據(jù)頁面，這些功能主要由用戶所使用的移動端或電腦端的瀏覽器完成。前端頁面代碼主要使用JavaScript，HTML，CSS等基本網(wǎng)頁語言編寫。HTML語言主要負(fù)責(zé)用標(biāo)簽在頁面中創(chuàng)建DOM容器，CSS語言主要負(fù)責(zé)修飾每個容器的樣式，JavaScript語言則負(fù)責(zé)為前端接入多種插件和API并實現(xiàn)網(wǎng)絡(luò)頁面的動態(tài)化。

1.3.1 前端交互層的框架 前端交互層接入BootStrap來搭建前端頁面的框架。Bootstrap是由HTML、CSS、JavaScript語言開發(fā)的前端頁面框架，使用這些框架能夠使前端頁面根據(jù)移動端和電腦端瀏覽器的分辨率做出動態(tài)的自適應(yīng)性調(diào)整，提高前端頁面對多種設(shè)備的兼容性，避免用戶因為分辨率問題帶來的頁面兼容性問題。同時，與其他諸多前端頁面框架相比，BootStrap擁有相對完整的教程文檔，整體頁面布局也簡潔精美耐看。使用BootStrap進(jìn)行開發(fā)可以省略許多前端網(wǎng)頁架構(gòu)設(shè)計工作，大幅提升Web項目的起步速度并減少開發(fā)成本。

1.3.2 前端交互層的圖表繪制 前端交互層通過接入Echarts插件實現(xiàn)可視化數(shù)據(jù)圖表的繪制。Echarts是基于JavaScript的開源可視化庫，向前端頁面提供直觀、交互豐富、可高度個性化定制的可視化數(shù)據(jù)圖表，可以兼容移動端和電腦端上絕大部分瀏覽器。Echarts的使用相對便捷，由于其提供的圖表已經(jīng)被對象化，所以只需要設(shè)置圖表的特定參數(shù)就可以實現(xiàn)柱狀圖、餅圖、線型圖等多種可視化數(shù)據(jù)圖表的個性化定制。不僅如此，Echarts提供的可視化數(shù)據(jù)圖表還具有高交互性，開發(fā)者可以對用戶在圖標(biāo)上的鼠標(biāo)移動、點擊等操作設(shè)置具體的響應(yīng)方式。本系統(tǒng)利用Echarts提供的圖表模板實現(xiàn)可視化數(shù)據(jù)圖表的繪制，并借助Echarts圖表模板的高交互性實現(xiàn)二次查詢功能。

1.3.3 前端交互層的電子地圖繪制 前端交互層通過接入百度地圖JavaScript API來實現(xiàn)電子地圖的繪制。百度地圖JavaScript API是一個基于JavaScript語言設(shè)計的API接口，能夠提供高功能性、高交互性的地圖應(yīng)用及數(shù)據(jù)服務(wù)。

本設(shè)計主要通過百度地圖JavaScript API獲取以下幾種服務(wù)內(nèi)容：第一，對林業(yè)統(tǒng)計數(shù)據(jù)中的省、市、縣、等各級行政區(qū)名稱進(jìn)行解析并獲取對應(yīng)的邊界數(shù)據(jù)和中心點數(shù)據(jù)，為林業(yè)統(tǒng)計數(shù)據(jù)匹配空間數(shù)據(jù)；第二，為前端頁面獲取高精細(xì)度、高交互性的地圖底圖，百度地圖提供的底圖具有精確的行政區(qū)及POI邊界，且能夠捕捉鼠標(biāo)在電子地圖上的停留、移動或點擊動作，使得開發(fā)者可以對用戶在地圖上的操作配置一系列的響應(yīng)機制；第三，對經(jīng)緯度數(shù)據(jù)進(jìn)行逆向解析得到結(jié)構(gòu)化地址信息。

本文選取的數(shù)據(jù)源是以縣級行政區(qū)為統(tǒng)計單位的林產(chǎn)品產(chǎn)量數(shù)據(jù)，通過百度地圖JavaScript API可以匹配到各行政區(qū)對應(yīng)的空間數(shù)據(jù)。前端交互層通過API獲取到的空間數(shù)據(jù)結(jié)合數(shù)據(jù)源，就可以在地圖底圖上繪出熱點圖、柱狀圖等圖表以表現(xiàn)林產(chǎn)品生產(chǎn)的空間分布情況。通過百度地圖JavaScript API，從系統(tǒng)外部為數(shù)據(jù)源自動匹配空間數(shù)據(jù)，降低了對系統(tǒng)內(nèi)部的可視化材料要求。由于百度地圖JavaScript API支持為省、市、縣、區(qū)等各級行政區(qū)域提供空間數(shù)據(jù)，故本設(shè)計對多種林業(yè)統(tǒng)計數(shù)據(jù)的可視化系統(tǒng)建設(shè)均具有較強的兼容性和復(fù)用性。

圖2 查詢流程

1.3.4 前端交互層的異步更新技術(shù) 傳統(tǒng)網(wǎng)頁不論更新整個網(wǎng)頁內(nèi)容還是一部分內(nèi)容，都需要重新加載整個網(wǎng)頁。由于本設(shè)計在前端頁面接入較多插件和API，重新加載整個網(wǎng)頁會造成不必要的重復(fù)性加載，如此一來，用戶進(jìn)行每一次查詢都需要花費較長時間。系統(tǒng)加入Ajax技術(shù)來解決這種問題。Ajax指異步JavaScript和XML，可以向服務(wù)器發(fā)出異步請求，再根據(jù)服務(wù)器的返回內(nèi)容，只對頁面中的一部分內(nèi)容進(jìn)行更新，整個過程無需重新加載整個頁面。系統(tǒng)在特定場合會使用Ajax技術(shù)實現(xiàn)一部分前端頁面內(nèi)容的異步更新，以減少不必要的重復(fù)性內(nèi)容加載并使系統(tǒng)能夠更加迅速地對用戶的操作進(jìn)行反應(yīng)。

圖3 搜索框

2 系統(tǒng)效果

系統(tǒng)展現(xiàn)給用戶的頁面主要有查詢頁面和數(shù)據(jù)頁面。查詢頁面負(fù)責(zé)接收用戶的查詢指令，數(shù)據(jù)頁面負(fù)責(zé)向用戶呈現(xiàn)數(shù)據(jù)可視化的結(jié)果并接收用戶的二次查詢請求。用戶共有2種可視化數(shù)據(jù)申請方式(圖2)。第一種方式是用戶在查詢頁面進(jìn)行查詢操作，把自己的可視化數(shù)據(jù)需求輸入至系統(tǒng)，系統(tǒng)根據(jù)用戶需求把數(shù)據(jù)頁面呈現(xiàn)給用戶。第二種方式是用戶在數(shù)據(jù)頁面直接進(jìn)行二次查詢操作，把新的可視化數(shù)據(jù)需求輸入至系統(tǒng)，系統(tǒng)根據(jù)用戶需求把新的數(shù)據(jù)頁面呈現(xiàn)給用戶。

2.1 查詢頁面

系統(tǒng)查詢頁面需要精確接收用戶的可視化數(shù)據(jù)需求，設(shè)有詳細(xì)的搜索框(圖3)。查詢頁面為用戶提供數(shù)據(jù)維度可選項，用戶可以選擇具體的可視化維度、林產(chǎn)品種類、年份、縣級生產(chǎn)地等變量。查詢頁面會把用戶輸入的查詢指令轉(zhuǎn)化為參數(shù)，再把附有參數(shù)的HTTP請求發(fā)送至服務(wù)器。

2.2 數(shù)據(jù)頁面

數(shù)據(jù)頁面負(fù)責(zé)展現(xiàn)系統(tǒng)的數(shù)據(jù)可視化結(jié)果，包括電子地圖部分與可視化數(shù)據(jù)圖表部分，以2017年臍橙的主要縣級生產(chǎn)地與產(chǎn)量數(shù)據(jù)為例進(jìn)行數(shù)據(jù)頁面的說明，見圖4。左側(cè)的電子地圖部分以百度地圖底圖為背景，顯示用戶所選年份、所選林產(chǎn)品在全國各地的產(chǎn)量熱點圖。同時，右側(cè)的可視化數(shù)據(jù)圖表部分顯示用戶所選年份、所選林產(chǎn)品在全國各地的產(chǎn)量柱狀圖，其數(shù)據(jù)內(nèi)容與電子地圖部分保持動態(tài)一致。

頁面中的電子地圖部分和可視化數(shù)據(jù)圖表部分均擁有可交互性，各元素都可以捕捉用戶的鼠標(biāo)操作。鼠標(biāo)在電子地圖部分停留或移動時，紅色框會跟隨鼠標(biāo)出現(xiàn)并顯示當(dāng)前鼠標(biāo)所指行政區(qū)名稱，精確到三級行政區(qū)。而當(dāng)用戶在電子地圖上進(jìn)行點擊操作時，系統(tǒng)會以用戶點擊處的行政區(qū)域名稱為關(guān)鍵詞進(jìn)行二次查詢；同時，可視化數(shù)據(jù)圖表部分也可以捕捉用戶的點擊操作，系統(tǒng)會以用戶點擊的行政區(qū)域名稱為關(guān)鍵詞進(jìn)行二次查詢。

圖4 數(shù)據(jù)頁面

3 小結(jié)

本系統(tǒng)采用瀏覽器/服務(wù)器架構(gòu)實現(xiàn)了客戶端的輕量化，且使用網(wǎng)絡(luò)應(yīng)用的三層結(jié)構(gòu)以實現(xiàn)一定程度上的解耦，明確各層級的分工，減少層級間的依賴。與其它林業(yè)數(shù)據(jù)可視化系統(tǒng)相比，該系統(tǒng)具有以下幾點特征：第一，系統(tǒng)在前端交互層，利用BootStrap搭建了具有高兼容性的頁面框架，利用ECharts插件繪制了具有高交互性的可視化數(shù)據(jù)圖表，接入百度地圖JavaScript API為林業(yè)統(tǒng)計數(shù)據(jù)匹配空間數(shù)據(jù)并獲取電子地圖底圖。由于系統(tǒng)從外部獲取大部分可視化材料，降低了對系統(tǒng)內(nèi)部的數(shù)據(jù)門檻，減輕了服務(wù)器的負(fù)荷。第二，系統(tǒng)在Echarts插件和百度地圖JavaScript API的支持下，實現(xiàn)了具有高交互性的可視化數(shù)據(jù)界面，用戶能夠方便快捷地在電子地圖和可視化數(shù)據(jù)圖表上進(jìn)行二次查詢操作。第三，由于百度地圖JavaScript API能夠根據(jù)各級行政區(qū)名稱提供對應(yīng)的邊界數(shù)據(jù)和中心點數(shù)據(jù)，該系統(tǒng)架構(gòu)適用于以行政區(qū)為統(tǒng)計單位的絕大部分林業(yè)統(tǒng)計數(shù)據(jù)。

本設(shè)計以電子地圖和可視化數(shù)據(jù)圖表為載體對林業(yè)統(tǒng)計數(shù)據(jù)進(jìn)行可視化，實現(xiàn)了較好的林業(yè)統(tǒng)計數(shù)據(jù)可視化效果，能夠向廣大林業(yè)管理者提供決策依據(jù)與數(shù)據(jù)支持，并利用數(shù)據(jù)推動林業(yè)決策的科學(xué)化。