張偉康 王封祚

摘要：隨著單頁(yè)面Web應(yīng)用開(kāi)發(fā)技術(shù)的不斷完善，越來(lái)越多的Web應(yīng)用都采用了單頁(yè)應(yīng)用模式。本文以疏勒河水流確權(quán)成果展示系統(tǒng)建設(shè)為例，闡述了運(yùn)用Vue框架搭建單頁(yè)面GIS應(yīng)用的基本過(guò)程，為開(kāi)發(fā)人員搭建單頁(yè)面GIS應(yīng)用提供了一種新思路。

關(guān)鍵詞：?jiǎn)雾?yè)面Web應(yīng)用;Vue

0 引言

近幾年來(lái)單頁(yè)面Web應(yīng)用飛速發(fā)展，涌現(xiàn)了多種適合開(kāi)發(fā)單頁(yè)面Web應(yīng)用的框架，如React.js、Angular.js、Vue.js等，越來(lái)越多的Web應(yīng)用也都采用了單頁(yè)面模式。單頁(yè)Web應(yīng)用 （single page web application），縮寫(xiě)為SPA，它是指在瀏覽器中運(yùn)行的應(yīng)用，它們?cè)谑褂闷陂g不會(huì)重新加載頁(yè)面?？梢哉J(rèn)為單頁(yè)應(yīng)用是一種從Web服務(wù)器加載的富客戶端[1]。單頁(yè)應(yīng)用程序 （SPA） 是加載單個(gè)HTML 頁(yè)面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。 瀏覽器一開(kāi)始會(huì)加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁(yè)面上完成，都由JavaScript來(lái)控制。因此，對(duì)單頁(yè)應(yīng)用來(lái)說(shuō)模塊化的開(kāi)發(fā)和設(shè)計(jì)顯得相當(dāng)重要。

Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件[2]。

本文以疏勒河流域干流水域岸線水生態(tài)空間確權(quán)項(xiàng)目為例，基于單頁(yè)面Web應(yīng)用開(kāi)發(fā)理念，運(yùn)用Vue框架構(gòu)建了該項(xiàng)目的成果展示系統(tǒng)。

1 建設(shè)背景

為落實(shí)中央《生態(tài)文明體制改革總體方案》，經(jīng)國(guó)務(wù)院同意，水利部、原國(guó)土資源部下發(fā)了《水流產(chǎn)權(quán)確權(quán)試點(diǎn)方案》（水規(guī)計(jì)〔2016〕397號(hào)），將甘肅省列為全國(guó)水流產(chǎn)權(quán)確權(quán)試點(diǎn)?。▍^(qū)）之一。按照《水流產(chǎn)權(quán)確權(quán)試點(diǎn)方案》，水流產(chǎn)權(quán)確權(quán)在甘肅試點(diǎn)的任務(wù)是在疏勒河流域開(kāi)展水資源和水域、岸線等水生態(tài)空間確權(quán)工作。疏勒河流域干流水域岸線水生態(tài)空間確權(quán)成果豐富，建設(shè)一個(gè)基于上述成果的展示系統(tǒng)，對(duì)項(xiàng)目成果進(jìn)行可視化展示及管理。展示系統(tǒng)建設(shè)需將成果統(tǒng)一規(guī)范整理，通過(guò)“一站式”瀏覽的方式實(shí)現(xiàn)查詢、統(tǒng)計(jì)、地圖瀏覽、圖層控制等功能。

2 系統(tǒng)設(shè)計(jì)

2.1 系統(tǒng)框架設(shè)計(jì)

疏勒河水域岸線水生態(tài)空間確權(quán)展示系統(tǒng)采用微服務(wù)的架構(gòu)，系統(tǒng)的架構(gòu)如下圖所示，一共分為三層，分別是數(shù)據(jù)層、服務(wù)層和應(yīng)用層。系統(tǒng)總體架構(gòu)如圖1所示。

數(shù)據(jù)層：包含基礎(chǔ)測(cè)繪數(shù)據(jù)、劃界數(shù)據(jù)、功能區(qū)劃分?jǐn)?shù)據(jù)、涉水工程數(shù)據(jù)、自然資源數(shù)據(jù)、文檔數(shù)據(jù)等，為系統(tǒng)提供數(shù)據(jù)支持;服務(wù)層：包含地圖服務(wù)、文件服務(wù)、業(yè)務(wù)服務(wù)、圖片服務(wù)。為系統(tǒng)提供地圖瀏覽服務(wù)、查詢服務(wù)、定位服務(wù)等;服務(wù)層的實(shí)現(xiàn)基于Spring Boot微服務(wù)、地圖服務(wù)開(kāi)發(fā)基于ArcGIS Enterprise;應(yīng)用層：主要是成果展示系統(tǒng)的各個(gè)功能模塊。應(yīng)用層系統(tǒng)開(kāi)發(fā)基于Vue.js框架。

2.2 功能設(shè)計(jì)

疏勒河流域干流水域岸線水生態(tài)空間確權(quán)成果包括基礎(chǔ)測(cè)繪成果、劃界成果、自然資源調(diào)查成果、涉水工程成果、岸線功能區(qū)劃分成果、登記平臺(tái)成果、文檔成果等，成果類型包括文檔、圖片、影像、地形圖、數(shù)據(jù)庫(kù)等。

根據(jù)以上成果分類，將系統(tǒng)功能分為地圖基本功能和業(yè)務(wù)模塊功能，其中業(yè)務(wù)模塊功能包括成果簡(jiǎn)介、基礎(chǔ)測(cè)繪、劃界成果、自然資源、涉水工程、岸線功能區(qū)、登記平臺(tái)、文檔報(bào)告8個(gè)模塊。

3 系統(tǒng)開(kāi)發(fā)

3.1 地圖服務(wù)開(kāi)發(fā)

電子地圖制作完成后，對(duì)其進(jìn)行瓦片制作。地圖瓦片（tile）是WebGIS中常使用的一種技術(shù)，通過(guò)地圖瓦片可以有效縮短服務(wù)器的地圖生成時(shí)間和地圖傳送時(shí)間，提高系統(tǒng)相應(yīng)速度，以此實(shí)現(xiàn)電子地圖的網(wǎng)絡(luò)共享，提升電子地圖的訪問(wèn)效率。

電子地圖的切片在ArcGIS Server中完成，參照互聯(lián)網(wǎng)地圖分級(jí)設(shè)置，結(jié)合本次電子地圖數(shù)據(jù)范圍，分別對(duì)制作的基礎(chǔ)底圖、專題地圖進(jìn)行瓦片裁切，切片級(jí)別從L9至L17。

使用ArcGIS Server進(jìn)行地圖服務(wù)的發(fā)布、管理，在軟件層面上實(shí)現(xiàn)地圖服務(wù)訪問(wèn)的負(fù)載均衡。方便后期地圖服務(wù)器節(jié)點(diǎn)擴(kuò)展，地圖服務(wù)器的冗余增加了地圖服務(wù)訪問(wèn)的可靠性。

3.2 系統(tǒng)功能開(kāi)發(fā)

基于Vue框架和Element組件，結(jié)合HTML5技術(shù)、Ajax異步傳輸技術(shù)、Webpack、ECMAScript6標(biāo)準(zhǔn)、Node.JS等進(jìn)行前端開(kāi)發(fā)。系統(tǒng)主界面如圖2所示，左側(cè)為業(yè)務(wù)模塊導(dǎo)航欄，中間區(qū)域?yàn)榈貓D展示區(qū)域，上方為成果展示系統(tǒng)的名稱，右上角為地圖操作按鈕和退出系統(tǒng)按鈕，系統(tǒng)界面的設(shè)計(jì)以用戶使用習(xí)慣為主，界面簡(jiǎn)潔易于操作、布局合理、視覺(jué)平衡。

4 結(jié)束語(yǔ)

由于GIS應(yīng)用大都以地圖為核心，主要功能也是圍繞地圖實(shí)現(xiàn)的，因此利用單頁(yè)面技術(shù)進(jìn)行GIS應(yīng)用開(kāi)發(fā)是比較合適的。在系統(tǒng)開(kāi)發(fā)過(guò)程中使用Vue框架減少了大量的DOM操作，提高了系統(tǒng)的可維護(hù)性，簡(jiǎn)化了代碼編寫(xiě)難度，大幅提高了開(kāi)發(fā)效率。

參考文獻(xiàn)

[1]鄧雯婷.基于Vue.js構(gòu)建單頁(yè)面GIS應(yīng)用的方法研究[J].科技創(chuàng)新與應(yīng)用，2018（14）：5-7+10.

[2]Vue.js漸進(jìn)式Java Script框架[EB/OL].http：//cn.vuejs.org.

[3]麥冬，陳濤，梁宗灣.輕量級(jí)響應(yīng)式框架Vue.js應(yīng)用分析[J].計(jì)算機(jī)工程應(yīng)用技術(shù)，2017 （7） ：58-59.