儀鋒 特日根

【摘? 要】隨著地理信息數(shù)據(jù)獲取技術(shù)日漸完善，地理信息數(shù)據(jù)在遙感領(lǐng)域應(yīng)用的不斷深入，人們對海量地理信息數(shù)據(jù)的檢索需求也在不斷提高。論文立足于地理信息數(shù)據(jù)高效檢索的研究方向，采用數(shù)據(jù)驅(qū)動框架Vue實現(xiàn)海量地理信息數(shù)據(jù)的可視化展示。Vue作為當今時代熱門的前端框架之一，提供了一種快速構(gòu)建并開發(fā)前端項目新的思維。論文分析并探討了Vue在地理信息檢索系統(tǒng)應(yīng)用的可行性及實現(xiàn)方法，并證明了Vue的優(yōu)勢可在地理信息檢索系統(tǒng)得到有效的利用。

【Abstract】With the continuous improvement of geographic information data acquisition technology， and with the deepening of the application of geographic information data in the field of remote sensing， people's retrieval demand for massive geographic information data is also constantly increasing. Based on the research direction of efficient retrieval of geographic information data， this paper adopts the data-driven framework Vue to realize the visualization display of massive geographic information data. As one of the popular front-end frameworks in today's era， Vue provides a new thinking to quickly build and develop front-end project. This paper analyzes and discusses the feasibility and implementation of the application of Vue in geographic information retrieval system， and proves that the advantages of Vue can be effectively used in geographic information retrieval system.

【關(guān)鍵詞】遙感;地理信息數(shù)據(jù);Vue;數(shù)據(jù)驅(qū)動;前端框架

【Keywords】remote sensing; geographic information data; Vue; data-driven; front-end framework

【中圖分類號】TP391? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文獻標志碼】A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文章編號】1673-1069（2020）05-0166-03

1 引言

近年來，隨著航空航天技術(shù)的飛速發(fā)展，遙感影像數(shù)據(jù)（例如，地面攝影、衛(wèi)星遙感攝影、航空攝影）以幾何量級的數(shù)目增加。遙感數(shù)據(jù)的可視化在軍事、勘測、土建、農(nóng)業(yè)、水利等領(lǐng)域都發(fā)揮著重要作用[1]。如何高效且直觀地檢索及展示海量遙感數(shù)據(jù)成為了該類系統(tǒng)迫切需要解決的問題。

目前，Web系統(tǒng)主流的三大框架：Angular（Google），React（Facebook）和Vue（尤雨溪）在各大互聯(lián)網(wǎng)公司應(yīng)用廣泛，其中Vue擁有最廣泛的中文開源社區(qū)[2]。同時，前端技術(shù)的發(fā)展正從事件驅(qū)動向數(shù)據(jù)驅(qū)動過度，在使用Vue進行前端開發(fā)時，數(shù)據(jù)渲染很少用DOM來控制[3]。數(shù)據(jù)驅(qū)動的核心首先是將數(shù)據(jù)層與DOM進行綁定，其中Vue主要是通過defineProperties、setter、getter將初始化的Vue對象與DOM節(jié)點模板關(guān)聯(lián)起來，使得整個DOM里的所有子節(jié)點以及節(jié)點屬性都可以和Vue的data進行關(guān)聯(lián)。由此可以實現(xiàn)當data發(fā)生變化時，DOM也會作出相應(yīng)的改變，進而在前端實現(xiàn)了視圖與數(shù)據(jù)的雙向綁定[4]。

2 組件化

2.1 組件化優(yōu)勢

前端組件包含了HTML、CSS、JavaScript、模板、樣式、交互等內(nèi)容。對外部來說，組件是一個完全封閉的黑盒，只需按照組件設(shè)定的屬性、函數(shù)以及事件進行外部調(diào)用，無須考慮其內(nèi)部邏輯[5]。傳統(tǒng)的開發(fā)模式使得代碼無法復用，當多個模塊需要相同功能時，導致了大量代碼的冗余，使得代碼維護困難。同時，傳統(tǒng)的開發(fā)模式使得代碼粒度大，頁面需要加載更多無用的代碼，進而造成頁面響應(yīng)時間延長[6]。

前端組件化可以解決傳統(tǒng)模式的弊端，其高內(nèi)聚低耦合、數(shù)據(jù)相互獨立、內(nèi)部結(jié)構(gòu)密封等特性提高了系統(tǒng)的伸展性，降低了系統(tǒng)開發(fā)的難度，提升了開發(fā)者的開發(fā)效率。如圖1所示，展示了組件化在前端工程中的位置[7]。

2.2 Vue組件化

任意組件都是由prop（屬性）、event（事件）、slot（插槽）這三部分組成的，對這三部分進行良好的設(shè)計，可以獲得更高的組件維護效率。

Vue各組件間作用域相對獨立，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。若想傳遞數(shù)據(jù)，父組件可以通過“屬性”子組件傳遞數(shù)據(jù)，子組件可以通過“事件”向父組件傳遞數(shù)據(jù)[8]，其父子組件數(shù)據(jù)流轉(zhuǎn)如圖2所示。

3 系統(tǒng)總體設(shè)計

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

依據(jù)地理信息檢索系統(tǒng)需求，采用B/S架構(gòu)實現(xiàn)系統(tǒng)架構(gòu)設(shè)計。主要包括Web前端服務(wù)器、Web后端服務(wù)器、GIS服務(wù)器及數(shù)據(jù)庫服務(wù)器。系統(tǒng)前端選用Vue.js作為數(shù)據(jù)驅(qū)動的Web漸進式框架[9]。系統(tǒng)架構(gòu)如圖3所示。

本系統(tǒng)前端部分主要負責數(shù)據(jù)的展示，后端負責系統(tǒng)業(yè)務(wù)的處理以及與數(shù)據(jù)庫的交互。根據(jù)系統(tǒng)的總體設(shè)計，前端項目的文件目錄結(jié)構(gòu)如下所示：

package.json配置全局所需的插件以及JS框架的依賴文件。

配置config下面的JS文件，其功能主要表現(xiàn)在配置Node的NPM管理工具。

配置核心src文件，主要包括了整個項目總體設(shè)計，其中涵蓋路由跳轉(zhuǎn)、邏輯交互、頁面展示、接口請求等功能。

api文件夾：采用Axios與后端交互，該文件夾定義了與后端交互的JS邏輯交互。

components目錄：定義了Vue項目的組件。

Vuex文件：組織管理代碼，記錄所有的全局狀態(tài)，其主要應(yīng)用在中大型數(shù)據(jù)管理。

util文件夾：公共方法文件夾。

plugin文件：第三方控件。

router.js：配置全局路由，控制路由跳轉(zhuǎn)。

App.vue文件：主視圖組件，是所有視圖的入口。

main.js：主函數(shù)入口，引入所需的JS和CSS，并啟動整個項目。

以上組件化設(shè)計有效地規(guī)避了代碼冗余問題，降低了系統(tǒng)的耦合性。每個組件之間相對獨立，便于開發(fā)者實現(xiàn)項目的維護與升級[10]。

3.2 系統(tǒng)組件化設(shè)計

地理信息檢索系統(tǒng)采用的地圖插件是Leaflet，選用的開源項目是Vue2Leaflet[11]。Vue2Leaflet封裝了Leaflet的基本組件，該組件涵蓋了點、圓、多邊形等常用地理信息要素，對shp文件、json文件都有著良好的支持[12]。

3.3 系統(tǒng)項目部署

基于Vue框架的項目在構(gòu)建時需選用Vue-cli和Webpack共同構(gòu)建。前端服務(wù)器選用Nginx，利用Nginx的負載均衡及反向代理特性，將前后端代碼分別部署，降低系統(tǒng)耦合性，并由Vue-router作統(tǒng)一的路由跳轉(zhuǎn)，配置Axios實現(xiàn)訪問代理到后臺接口。系統(tǒng)檢索結(jié)果如圖4所示。

3.4 系統(tǒng)性能對比

Vue框架比傳統(tǒng)DOM數(shù)據(jù)渲染方式在效率上有明顯的提高，數(shù)據(jù)雙向綁定的特性使其在數(shù)據(jù)發(fā)生改變時，無須重新渲染數(shù)據(jù)，因此，在處理海量遙感信息數(shù)據(jù)方面有著更強的優(yōu)勢[13]。為了印證Vue渲染數(shù)據(jù)性能優(yōu)勢，作了如下對比實驗。實驗數(shù)據(jù)指標為檢索返回的1000條總大小為1.8M的地理信息數(shù)據(jù)所需要的渲染時間，實驗方式為改變數(shù)據(jù)中的某個屬性，對比兩者數(shù)據(jù)渲染所需時間，其結(jié)果如表1所示。

4 結(jié)語

地理信息檢索系統(tǒng)的主要特點是數(shù)據(jù)渲染量大，更新頻率高，依托Vue數(shù)據(jù)驅(qū)動型框架及其數(shù)據(jù)雙向綁定的特性能夠很好解決該類問題[14]。同時，Vue框架在前端開發(fā)中的應(yīng)用有效地縮短了前端開發(fā)流程，降低了系統(tǒng)的耦合性，代碼的重構(gòu)以及系統(tǒng)維護更加便利[15]。因此，Vue框架可有效地應(yīng)用于各類地理信息系統(tǒng)的開發(fā)中。

【參考文獻】

【1】陳斌，方裕.大型分布式地理信息系統(tǒng)的技術(shù)與發(fā)展[J].中國圖象圖形學報，2001（09）：49-52.

【2】朱二華.基于Vue.js的Web前端應(yīng)用研究[J].科技與創(chuàng)新，2017（20）：119-121.

【3】易劍波.基于MVVM模式的WEB前端框架的研究[J].信息與電腦，2016（019）：76-77+84.

【4】李猛坤，陳明.一種基于擴展MVVM模式的面向服務(wù)軟構(gòu)件模型[J].科學技術(shù)與工程，2011，11（10）：2349-2352.

【5】陳鯡.Web前端開發(fā)技術(shù)以及優(yōu)化方向分析[J].新媒體研究，2015（03）：45-46.

【6】孫宏偉，張樹生.組件化松耦企業(yè)應(yīng)用集成關(guān)鍵技術(shù)研究[J].計算機應(yīng)用，2002，22（4）：4-5.

【7】戴翔宇.Web前端工程組件化的分析與改進[D].吉林：吉林大學，2016.

【8】丁克奎，鐘凱文，周旭斌，等.基于WebSocket和GeoJSON的WebGIS的設(shè)計與實現(xiàn)[J].測繪通報，2015（2）：109-112.

【9】陳巖.輕量級響應(yīng)式框架Vue.js應(yīng)用分析[J].中國管理信息化，2018，21（03）：181-183.

【10】黃佛輝.WebGIS中空間數(shù)據(jù)的可視化[J].城市地理，2016（20）：170-171.

【11】顧振雄.基于Leaflet開源JS類庫的在線圖形編輯[J].地理空間信息，2017（3）：74-76.

【12】Yan Z X，Ya G J ，Cheng C N，et al.Web GIS-GeoSurf Based on J2EE Systematical Structure and Its Realization Technology[J].geomatics world，2003（6）：208.

【13】陳濤.MVVM設(shè)計模式及其應(yīng)用研究磁[J].計算機與數(shù)字工程，2014（10）：1982-1985.

【14】宋關(guān)福，鐘耳順.組件式地理信息系統(tǒng)研究與開發(fā)[J].中國圖象圖形學報，1998（04）：53-57.

【15】張行文，李艷生，汪自云.一類基于WEB的分布式松耦合過程系統(tǒng)設(shè)計與實現(xiàn)[J].湖北師范學院學報：自然科學版，2006（03）：21-25.