Vue框架在地理信息檢索系統中的應用

儀鋒 特日根

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

【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.

【關鍵詞】遙感;地理信息數據;Vue;數據驅動;前端框架

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

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

1 引言

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

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

2 組件化

2.1 組件化優勢

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

前端組件化可以解決傳統模式的弊端，其高內聚低耦合、數據相互獨立、內部結構密封等特性提高了系統的伸展性，降低了系統開發的難度，提升了開發者的開發效率。如圖1所示，展示了組件化在前端工程中的位置[7]。

2.2 Vue組件化

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

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

3 系統總體設計

3.1 系統架構設計

依據地理信息檢索系統需求，采用B/S架構實現系統架構設計。主要包括Web前端服務器、Web后端服務器、GIS服務器及數據庫服務器。系統前端選用Vue.js作為數據驅動的Web漸進式框架[9]。系統架構如圖3所示。

本系統前端部分主要負責數據的展示，后端負責系統業務的處理以及與數據庫的交互。根據系統的總體設計，前端項目的文件目錄結構如下所示：

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

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

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

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

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

Vuex文件：組織管理代碼，記錄所有的全局狀態，其主要應用在中大型數據管理。

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

plugin文件：第三方控件。

router.js：配置全局路由，控制路由跳轉。

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

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

以上組件化設計有效地規避了代碼冗余問題，降低了系統的耦合性。每個組件之間相對獨立，便于開發者實現項目的維護與升級[10]。

3.2 系統組件化設計

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

3.3 系統項目部署

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

3.4 系統性能對比

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

4 結語

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

【參考文獻】

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

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

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

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

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

【6】孫宏偉，張樹生.組件化松耦企業應用集成關鍵技術研究[J].計算機應用，2002，22（4）：4-5.

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

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

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

【10】黃佛輝.WebGIS中空間數據的可視化[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設計模式及其應用研究磁[J].計算機與數字工程，2014（10）：1982-1985.

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

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