基于Vue.js构建单页面GIS应用的方法研究

邓雯婷

摘 要：随着单页Web应用开发技术的不断完善，越来越多的Web应用都采用了单页应用模式。文章详细介绍了基于Vue构建单页面应用的系统架构、关键技术，并以闵行区基于航拍影片的建设用地核对项目为例，搭建了闵行区地块认定工作成果展示系统，为开发人员搭建单页面GIS应用提供了一种新的解决方案。

关键词：单页Web应用；Vue；前端路由；Vuex

中图分类号：P217 文献标志码：A 文章编号：2095-2945（2018）14-0005-04

Abstract： With the continuous improvement of technology in single-page Web application development， more and more Web applications have adopted a single-page application model. This paper introduces the system architecture and key technology of constructing single-page Web application， and taking the check project of drone film-based construction land in Minhang District as an example， builds a data display system， thus providing a new solution to constructing single-page web GIS application for developers.

Keywords： single-page Web application； Vue； front-end routing； Vuex

1 概述

近几年来单页Web应用迅速崛起，涌现了多种适合开发单页Web应用的框架，如Backbone.js、Angular.js、Vue.js等，越来越多的Web应用也都采用了单页应用模式。

当前对GIS系统的设计开发，无论是桌面端系统，还是平板电脑上的扩展应用，大多数GIS应用主要是围绕核心地图控件实现相关操作，可以说GIS应用系统天生就是单页Web应用。那么是不是可以尝试构建单页面GIS应用呢？本文选择了2016年在GitHub最受欢迎的前端框架Vue.js，对基于Vue构建单页面GIS应用进行了尝试，并结合上海市闵行区基于航拍影像的建设用地核对项目构建了一个简单的单页面GIS应用，主要实现图层控制、查询、量测等基本GIS功能。

2 核心概念

2.1 单页Web应用

单页Web应用（single page web application），缩写为SPA。它是指在浏览器中运行的应用，它们在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。[1]它将所有的活动局限在一个Web页面中，所有业务功能都是其子模块，这些子模块通过特定的方式掛接到页面中，当页面初始化时一次性加载相应的HTML、JavaScript和CSS，加载完成后SPA不会因为用户的操作而重新加载页面或是跳转，后续通过Ajax异步请求数据，利用JavaScript动态的变换HTML的内容（主要采用的是div的切换显示与隐藏），从而实现较为流畅的用户交互与用户体验。

2.2 Vue生态系统

Vue并不是一个独立的Vue.js文件，它是一套用于构建用户界面的渐进式框架，拥有相对完备的生态系统，包含核心vue.js库，快速搭建应用程序的脚手架vue-cli，负责路由管理的Vue Router，以及进行状态管理的Vuex，下面将主要介绍Vue.js、Vue Router和Vuex。

2.2.1 Vue.js的主要特点

Vue.js是一个JavaScript MVVM库（Model/View/ViewModel），是一套构建用户界面的渐进式框架[2]，其主要特点包括：（1）响应式数据绑定；（2）组件式应用构建。Vue.js提供了更加简洁、更易于理解的API。使用Vue.js可以去除繁琐的DOM操作，只需要关注数据的源头，而不用担心DOM元素变化之后的绑定变化。[3]

数据绑定：Vue能将数据和DOM绑定在一起，建立数据与DOM间的关联，页面中所有的元素都是响应式的。下面以Vue提供的v-model指令，简要解释一下Vue的双向数据绑定效果。不难发现，当使用v-model指令进行数据绑定时，修改message的值会使得绑定了message特性的HTML发生变化，反之亦然。

组件系统：是Vue的另一个重要概念，它允许开发人员使用小型、自包含和通常可复用的组件构建大型应用。在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例，并采用注册的方式使用Vue组件。本文在利用Vue构建单页面GIS应用时也将采用组件开发方式，通过组件的可复用性来提高GIS系统的开发效率。

2.2.2 Vue Router路由管理

传统的多页面Web应用是以页面为单位的，路由管理一般由服务端统一管理，当用户提出服务请求后，服务器将依据路由规则返回用户请求的页面。但是在单页面应用中，这就成了问题，因为程序只有一个页面，这时需要采用前端路由。

vue-router是Vue官方提供的路由，它与Vue.js是深度整合的，适合于构建单页Web应用。当引入vue-router后，开发人员需要做的是将组件映射到路由，然后告诉vue-router渲染规则。当应用程序是由多层嵌套的组件组合而成时，vue-router也支持嵌套路由配置，以实现嵌套组件间正确的路由传递。

2.2.3 Vuex状态管理

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理用于的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。[4]

在采用Vue.js进行组件式开发时，组件之间的作用域是相互独立的，而且组件之间经常需要传递数据，而且涉及的组件越多，管理起来就越复杂，Vuex就是为了帮助开发者更好地管理状态。

Vuex使用单一状态树，用一个store（仓库）对象包含全部的应用层级状态，并作为该应用的唯一数据源而存在，也就是说每个应用将包含且仅包含一个store实例。Vuex采用Getters函数在组件内部获取store中的状态（或理解为Vue组件数据），通过提交mutations驱动状态的变化，修改store中的状态，使用Actions在组件内部分发mutations事件函数。Vuex应用内部的数据流动如图4所示，从组件出发，Vue组件调用Actions，用于和后台API交互，获取数据源，采用Actions派发Mutation用于触发组件状态的改变，由于store是响应式的，所以任何状态的改变都将引发组件的同步更新，展现给用户的就是视图的更新。

图4 Vuex内部数据流动示意图[4]

3 场景实现

本文将以闵行区基于航拍影片的建设用地核对项目为例，基于Vue搭建单页面GIS应用程序闵行区地块认定工作成果展示系统。本文主要关注前端数据展示及功能实现，因此假定已实现了后台API的编写，可直接从服务器端获取所需的数据。

3.1 开发环境

本项目使用VS Code作为代码编辑器，使用vue-cli 快速生成模板的Vue工程，其中vue.js为核心JavaScript库，vue-router.js为路由管理库，vuex.js为状态管理。

3.1.1 安装vue-cli

vue-cli是vue官方发布的项目脚手架，可以帮助我们快速创建vue项目。在安装vue-cli之前，需要首先安装node环境。安装完成后，可以在命令行工具中输入node -v查看是否能显示版本号，若可以就说明node安装成功。

安装完node之后，通过在命令行工具中输入npm install-g vue-cli安装vue-cli。

3.1.2 创建项目

在命令行工具中输入vue init webpack MhProject，使用vue-cli依据现有模板创建vue项目。使用的模板名为webpack，新建的项目名称为MhProject。这里我选择了同时安装vue-router，也可以采用3.1.3中所述方式。

3.1.3 安装必要模块

在命令行工具中输入npm install vue-router安装vue-router。

在命令行工具中输入npm install vuex安装vuex。

3.2 项目组件设计

闵行区地块认定工作成果展示系统的主要功能模块包括：地图浏览、图层控制、空间量测、空间定位、数据检索，也是GIS系统的基本功能。

依据功能模块的划分将设计创建对应组件：（1）根组件App.vue；（2）地图组件Map.vue；（3）操作栏组件Toolbar.vue；（4）图层控制组件Layer.vue；（5）空间量测组件Measure.vue；（6）空间定位组件Locate.vue；（7）数据查询组件Query.vue。其中，App.vue为根组件存放在项目源代码src目录下，其他组件为子组件存放在项目源代码src目录下的components子目录中。导入组件的语法为：

import Map from './components/Map'

import Toolbar from './components/Toolbar'

import Layer from './components/Layer'

import Measure from './components/Measure'

import Locate from './components/Locate'

import Query from './components/Query'

vue中组件均由三部分组成，分别是（1）template：由html标签组成，用于规定组件的页面结构；（2）script：存储组件要引入的其他js模块和需要执行的函数；（3）style：组件相关的css样式，通过scope标签限定css的域为当前组件。

3.3 状态控制

在vue项目中通过引入vuex，进行数据状态管理。在GIS程序开发过程中，需要经常维护不同组件的状态，例如执行查询操作时需要将设定鼠标指针演示，同时需要禁用绘图、量测等组件的鼠标点击响应事件，这是一项及其复杂而易出错的操作。在vue中，使用vuex保证不同组件间的数据同步，通过数据的自动双向绑定，进而控制组件状态的自动切换，在此过程中，开发人员仅需要关注数据状态的维护。

具体实现方式是：通过命令Vue.use（Vuex）在程序启动时引入vuex，同时在项目源代码src目录下的store子目录中，设定vuex的主程序入口index.js，并将vuex核心的action、mutation引入程序中。

3.4 实现效果

闵行区地块认定工作成果展示系统只是一次初步尝试，主要实现了地图浏览、图层控制、数据检索、空间量测、空间定位等基本功能，尚有许多可补充和完善的地方：例如可进一步扩展组件功能，通过归纳和总结，开发一些具有通用性的GIS组件以供开发人员重复利用，如通用的地图打印输出组件、优化的空间量测组件等；在UI设计方面选用一些成熟的UI组件库如Bootstrap、NEJ、iView等，让Web应用拥有更美观的界面，让用户获得更良好的交互体验。

4 结束语

由于GIS应用多以地图为核心，主要是围绕地图实现相关的应用操作，因此使用单页面技术进行GIS应用开发在技术上可行的，在向移动端应用拓展方面也具有良好的可扩展性。在单页面Web应用构建过程中，数据的绑定是一项复杂的工作，不仅需要数据的初始化，而且需要对数据变化后的状态进行跟踪和调整，采取常规的JavaScript技术对页面的DOM进行操作（如jQuery、dojo等），不仅工作量大而且容易出错，因此采用基于的vue的MVVM前端框架进行数据模型绑定，同时使用Vue生态系统中的各类丰富扩展组件，进行数据状态维护、自定义模块化开发、前端样式库引入等，不仅可以提高程序的可维护性，而且可以简化代码编写强度，大幅提高系统开发效率。

參考文献：

[1]Michael S. Mikowski， Josh C. Powell.单页Web应用 JavaScript从前端到后端[M].包勇明，译.北京：人民邮电出版社，2014.

[2]Vue.js渐进式JavaScript框架[EB/OL].http：//cn.vuejs.org.

[3]麦冬，陈涛，梁宗湾.轻量级响应式框架Vue.js应用分析[J].计算机工程应用技术，2017（7）：58-59.

[4]Vuex[EB/OL].https：//vuex.vuejs.org/zh-cn/index.html.