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

基于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 singleWeb application development， more and more Web applications have adopted a singleapplication model. This paper introduces the system architecture and key technology of constructing singleWeb 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 singleweb GIS application for developers. 　　Keywords： singleWeb 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的值