Vue框架在地理信息檢索系統(tǒng)中的應(yīng)用

儀鋒 特日根

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

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

【中圖分類號(hào)】TP391? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文獻(xiàn)標(biāo)志碼】A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文章編號(hào)】1673-1069（2020）05-0166-03

1 引言

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

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

2 組件化

2.1 組件化優(yōu)勢(shì)

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

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

2.2 Vue組件化

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

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

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

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

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

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

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

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

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

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

components目錄：定義了Vue項(xiàng)目的組件。

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

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

plugin文件：第三方控件。

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

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

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

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

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

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

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

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

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

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

4 結(jié)語(yǔ)

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

【參考文獻(xiàn)】

【1】陳斌，方裕.大型分布式地理信息系統(tǒng)的技術(shù)與發(fā)展[J].中國(guó)圖象圖形學(xué)報(bào)，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】李猛坤，陳明.一種基于擴(kuò)展MVVM模式的面向服務(wù)軟構(gòu)件模型[J].科學(xué)技術(shù)與工程，2011，11（10）：2349-2352.

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

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

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

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

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

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

【11】顧振雄.基于Leaflet開(kāi)源JS類庫(kù)的在線圖形編輯[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è)計(jì)模式及其應(yīng)用研究磁[J].計(jì)算機(jī)與數(shù)字工程，2014（10）：1982-1985.

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

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