面向服務(wù)和組件化的WebGIS系統(tǒng)建設(shè)研究
——以長(zhǎng)三角區(qū)域地理信息系統(tǒng)為例

曹 斌

(上海市測(cè)繪院，上海 200063)

0 引 言

隨著城市精細(xì)化管理水平的日益提高，信息系統(tǒng)建設(shè)方向也朝著可視化、智能化方向發(fā)展，各政府部門對(duì)地理信息服務(wù)提出了數(shù)據(jù)權(quán)威、服務(wù)實(shí)時(shí)、接口標(biāo)準(zhǔn)、內(nèi)容全面、更新快速的新要求[1]。在用戶對(duì)地理信息應(yīng)用逐步深入過程中，需求逐漸由側(cè)重地圖瀏覽向側(cè)重地理信息融合業(yè)務(wù)流程轉(zhuǎn)變，展示方式由桌面應(yīng)用拓展到移動(dòng)端、大屏展示設(shè)備使用，開發(fā)方式由面向?qū)ο笤O(shè)計(jì)模式的傳統(tǒng)組件COMGIS[2]向基于B/S架構(gòu)跨平臺(tái)應(yīng)用發(fā)展。傳統(tǒng)WebGIS系統(tǒng)平臺(tái)單調(diào)的界面UI已經(jīng)不能滿足用戶的需求，早期簡(jiǎn)單的視覺效果缺乏界面友好度和交互的流暢度[3]。

為了滿足復(fù)雜的應(yīng)用場(chǎng)景和用戶需求，提高生產(chǎn)效率和團(tuán)隊(duì)協(xié)作能力，需要從系統(tǒng)整體設(shè)計(jì)和開發(fā)手段上對(duì)GIS系統(tǒng)服務(wù)端和前端開發(fā)進(jìn)行深入研究。本文結(jié)合長(zhǎng)三角區(qū)域地理信息系統(tǒng)項(xiàng)目，重點(diǎn)從業(yè)務(wù)流數(shù)據(jù)流融合為切入點(diǎn)，從服務(wù)功能劃分，前端數(shù)據(jù)模型和業(yè)務(wù)邏輯組件化等方面入手，引入目前主流的跨平臺(tái)庫(kù)React和組件復(fù)用的開發(fā)思想，通過構(gòu)建組件庫(kù)，實(shí)現(xiàn)組件配置參數(shù)化，對(duì)GIS系統(tǒng)建設(shè)幾個(gè)代表性問題，結(jié)合具體項(xiàng)目進(jìn)行了深入研究。

長(zhǎng)三角區(qū)域地理信息系統(tǒng)的建設(shè)目標(biāo)是建成系統(tǒng)化、高精度、動(dòng)態(tài)更新的長(zhǎng)三角區(qū)域地理信息基礎(chǔ)平臺(tái)。2016年，國(guó)務(wù)院對(duì)《長(zhǎng)江三角洲城市群發(fā)展規(guī)劃》批復(fù)中指出打造具有全球影響力的科技創(chuàng)新高地、全球重要的現(xiàn)代服務(wù)業(yè)和先進(jìn)制造業(yè)中心是建設(shè)具有全球影響力的世界級(jí)城市群的核心與關(guān)鍵[4]。更好服務(wù)于“一帶一路”建設(shè)和長(zhǎng)江經(jīng)濟(jì)帶發(fā)展戰(zhàn)略，充分發(fā)揮對(duì)全國(guó)經(jīng)濟(jì)社會(huì)發(fā)展的重要支撐和引領(lǐng)作用[5]。

本項(xiàng)目是為更好貫徹黨的十九大關(guān)于“實(shí)施區(qū)域協(xié)調(diào)發(fā)展戰(zhàn)略”，旨在統(tǒng)一的空間參考下，以基礎(chǔ)地理信息數(shù)據(jù)為基礎(chǔ)，以各類專題專項(xiàng)數(shù)據(jù)為業(yè)務(wù)核心，構(gòu)建系統(tǒng)化、高精度、動(dòng)態(tài)更新數(shù)據(jù)資源平臺(tái)。

1 研究方法

1.1 劃分后臺(tái)服務(wù)的功能邊界

WebGIS程序的后臺(tái)服務(wù)器端通常分為2類，提供地圖服務(wù)的地圖服務(wù)器和支撐業(yè)務(wù)邏輯的應(yīng)用服務(wù)器。

在系統(tǒng)建設(shè)過程中，地圖服務(wù)器和應(yīng)用服務(wù)器均能提供數(shù)據(jù)接口，以WMS服務(wù)為例，在提供地圖顯示功能的基礎(chǔ)上，其要素信息接口(GetFeatureInfo)提供對(duì)圖層地理實(shí)體的查詢功能；而另一方面，應(yīng)用服務(wù)器利用數(shù)據(jù)庫(kù)提供的空間函數(shù)，或使用空間拓?fù)洳僮鲙?kù)(如GeoTools的JTS組件[6-7])，也能夠?qū)崿F(xiàn)空間檢索功能。因此，為了規(guī)范化系統(tǒng)開發(fā)，在系統(tǒng)建設(shè)前按功能劃分業(yè)務(wù)邊界，從可維護(hù)性、擴(kuò)展性的角度，按照“專事專辦“的原則，地圖服務(wù)器重點(diǎn)提供地圖服務(wù)，應(yīng)用服務(wù)器提供地圖查詢、空間分析等地圖邏輯操作。同時(shí)，從開發(fā)角度，空間函數(shù)和空間庫(kù)提供的功能及其組合更加靈活，將空間邏輯從前端頁(yè)面轉(zhuǎn)移到后端應(yīng)用服務(wù)器，使前端頁(yè)面專注于展示效果開發(fā)，有利于開發(fā)團(tuán)隊(duì)的分工合作，各司其職。

1.2 建立數(shù)據(jù)驅(qū)動(dòng)頁(yè)面管理

地圖展示方式，通常為網(wǎng)頁(yè)中嵌入地圖控件，受限于HTTP請(qǐng)求的無(wú)狀態(tài)特性，頁(yè)面刷新后地圖和頁(yè)面元素均會(huì)返回初始狀態(tài)。但在業(yè)務(wù)邏輯復(fù)雜的場(chǎng)景中，通常有以下特殊要求：① 頁(yè)面非正常關(guān)閉或刷新時(shí)可快速返回之前狀態(tài)；② 地圖控件和頁(yè)面其他HMTL元素動(dòng)態(tài)關(guān)聯(lián)，常見的一個(gè)場(chǎng)景是在瀏覽地圖的過程中，根據(jù)圖上不同顯示區(qū)域動(dòng)態(tài)展示區(qū)域關(guān)聯(lián)的統(tǒng)計(jì)指標(biāo)。

上述需求的核心是對(duì)地圖狀態(tài)的實(shí)時(shí)跟蹤和實(shí)時(shí)存儲(chǔ)，在項(xiàng)目實(shí)踐中，采用觀察者設(shè)計(jì)模式(Observer)，對(duì)地圖的核心狀態(tài)(如中心點(diǎn)，縮放等級(jí)，圖層開閉，控件狀態(tài)等)進(jìn)行跟蹤，并定時(shí)將其序列化并保存。當(dāng)頁(yè)面發(fā)生異常重新載入時(shí)，按照約定邏輯提取之前狀態(tài)并載入，從而還原地圖狀態(tài)。同時(shí)，可將地圖核心狀態(tài)作為參數(shù)傳遞，從而實(shí)現(xiàn)個(gè)性化的頁(yè)面初始化。

此外，對(duì)于地圖平移、地圖縮放等連續(xù)操作，太過頻繁的狀態(tài)存取會(huì)導(dǎo)致前端頁(yè)面資源大量消耗，采用數(shù)據(jù)防抖(debounce)策略，對(duì)持續(xù)觸發(fā)的地圖操作，一定時(shí)間段內(nèi)沒有再次觸發(fā)才會(huì)執(zhí)行狀態(tài)保存，在此時(shí)間段中如果再次執(zhí)行地圖操作，則重新計(jì)算延時(shí)，從而降低頁(yè)面資源消耗。

1.3 封裝通用功能組件

常規(guī)GIS程序以頁(yè)面作為功能單元進(jìn)行拆分，將通用方法包裝成函數(shù)在頁(yè)面間共享。參考前端組件化思想，將系統(tǒng)按照邏輯拆分成一個(gè)個(gè)功能單元，將具有相似功能的單元抽象成組件，按邏輯單元實(shí)現(xiàn)組件化。頁(yè)面間不僅可以共享函數(shù)，而且可以共享組件，可進(jìn)一步提高系統(tǒng)可復(fù)用度。

在組件化拆分時(shí)，有2個(gè)重要原則：① 注重共性，在不同頁(yè)面中抽象出業(yè)務(wù)邏輯、展示方式相似的部分，將其形成組件；② 數(shù)據(jù)驅(qū)動(dòng)，即組件僅完成數(shù)據(jù)渲染的工作，并不改變數(shù)據(jù)本身，數(shù)據(jù)由數(shù)據(jù)模型按照業(yè)務(wù)邏輯進(jìn)行集中控制。

組件化有助于項(xiàng)目開發(fā)人員梳理更清晰的業(yè)務(wù)邏輯，通過約定數(shù)據(jù)模型即可進(jìn)行項(xiàng)目協(xié)作，同時(shí)可以方便地進(jìn)行局部單元測(cè)試。從更加宏觀層面，通過項(xiàng)目積累的組件，可以逐步整合形成GIS資源組件庫(kù)，在不同項(xiàng)目間調(diào)用，避免重復(fù)“造輪子”，提高生產(chǎn)效率。

2 結(jié)果與分析

如圖1所示，長(zhǎng)三角區(qū)域地理信息系統(tǒng)架構(gòu)按自頂向下，分為應(yīng)用層、服務(wù)層、數(shù)據(jù)層和基礎(chǔ)設(shè)施層。

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

2.1 前后端分離架構(gòu)

根據(jù)前端頁(yè)面拆分組件時(shí)的功能要求，將每個(gè)功能設(shè)計(jì)對(duì)應(yīng)的WebAPI服務(wù)；同時(shí)，對(duì)涉及空間運(yùn)算和空間分析的部分，使用PostGIS提供的空間函數(shù)在數(shù)據(jù)訪問層實(shí)現(xiàn)。

為保障服務(wù)安全性，本項(xiàng)目中使用JWT(JSON Web Token)解決方案控制用戶身份認(rèn)證和數(shù)據(jù)權(quán)限，在實(shí)現(xiàn)服務(wù)安全控制的同時(shí)，兼容分布式架構(gòu)擴(kuò)展和多端(瀏覽器、移動(dòng)端)接入。

2.2 頁(yè)面狀態(tài)管理

以統(tǒng)計(jì)展示模塊中一個(gè)功能場(chǎng)景為例，需要在地圖操作時(shí)展示不同省、市的統(tǒng)計(jì)年鑒信息，由當(dāng)前地圖中心控制展示對(duì)象并高亮，并根據(jù)縮放等級(jí)控制顯示不同級(jí)別行政區(qū)的數(shù)據(jù)。此外，當(dāng)用戶鼠標(biāo)在統(tǒng)計(jì)表中移動(dòng)時(shí)，地圖上的相應(yīng)區(qū)域高亮展示。

傳統(tǒng)數(shù)據(jù)綁定的方式實(shí)現(xiàn)上述功能需要大量代碼且維護(hù)困難，在本項(xiàng)目中將頁(yè)面看成一個(gè)狀態(tài)機(jī)(State Machine)，地圖的中心點(diǎn)位置、縮放等級(jí)、數(shù)據(jù)表格選中記錄等均作為狀態(tài)進(jìn)行跟蹤，通過用戶交互控制狀態(tài)發(fā)生變化，從而驅(qū)動(dòng)地圖或數(shù)據(jù)表格等界面元素渲染，使其與狀態(tài)保持一致，如圖2所示。

圖2 頁(yè)面狀態(tài)管理示意圖

2.3 組件庫(kù)

在項(xiàng)目實(shí)施過程中，通過動(dòng)態(tài)傳入?yún)?shù)，結(jié)合React庫(kù)，將常用功能抽象后形成組件，從而減少了重復(fù)代碼[3]，通過組件構(gòu)成復(fù)雜功能頁(yè)面，并在不同頁(yè)面間進(jìn)行復(fù)用，大大提高了團(tuán)隊(duì)開發(fā)效率。

如圖3所示，通過將捕捉視點(diǎn)位置、縮放層級(jí)、當(dāng)前數(shù)據(jù)集等參數(shù)，動(dòng)態(tài)傳入側(cè)邊控件，結(jié)合預(yù)設(shè)的展示參數(shù)，渲染統(tǒng)計(jì)圖表。

圖3 組件化示意圖

2.4 系統(tǒng)成果展示

項(xiàng)目設(shè)計(jì)時(shí)使用響應(yīng)式頁(yè)面布局，支持桌面和移動(dòng)端顯示適配。系統(tǒng)不僅有面向工作人員的日常工作臺(tái)面，而且通過定制化可以滿足大屏展示要求，系統(tǒng)建成后效果如圖4所示。

圖4 系統(tǒng)運(yùn)行效果圖

3 結(jié) 語(yǔ)

本文結(jié)合長(zhǎng)三角區(qū)域地理信息系統(tǒng)建設(shè)項(xiàng)目，以頂層設(shè)計(jì)時(shí)的規(guī)劃和優(yōu)化為切入點(diǎn)，重點(diǎn)關(guān)注功能邊界切分，核心數(shù)據(jù)模型設(shè)計(jì)，功能組件開發(fā)等環(huán)節(jié)，形成一套GIS功能開發(fā)的新思路，對(duì)于大型GIS項(xiàng)目的開發(fā)和長(zhǎng)期運(yùn)維，以及項(xiàng)目團(tuán)隊(duì)長(zhǎng)遠(yuǎn)建設(shè)有著重要參考價(jià)值。