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.