張偉康 王封祚
摘要:隨著單頁面Web應(yīng)用開發(fā)技術(shù)的不斷完善,越來越多的Web應(yīng)用都采用了單頁應(yīng)用模式。本文以疏勒河水流確權(quán)成果展示系統(tǒng)建設(shè)為例,闡述了運用Vue框架搭建單頁面GIS應(yīng)用的基本過程,為開發(fā)人員搭建單頁面GIS應(yīng)用提供了一種新思路。
關(guān)鍵詞:單頁面Web應(yīng)用;Vue
0 引言
近幾年來單頁面Web應(yīng)用飛速發(fā)展,涌現(xiàn)了多種適合開發(fā)單頁面Web應(yīng)用的框架,如React.js、Angular.js、Vue.js等,越來越多的Web應(yīng)用也都采用了單頁面模式。單頁Web應(yīng)用 (single page web application),縮寫為SPA,它是指在瀏覽器中運行的應(yīng)用,它們在使用期間不會重新加載頁面。可以認(rèn)為單頁應(yīng)用是一種從Web服務(wù)器加載的富客戶端[1]。單頁應(yīng)用程序 (SPA) 是加載單個HTML 頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的Web應(yīng)用程序。 瀏覽器一開始會加載必需的HTML、CSS和JavaScript,所有的操作都在這張頁面上完成,都由JavaScript來控制。因此,對單頁應(yīng)用來說模塊化的開發(fā)和設(shè)計顯得相當(dāng)重要。
Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是,Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層,不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時,Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件[2]。
本文以疏勒河流域干流水域岸線水生態(tài)空間確權(quán)項目為例,基于單頁面Web應(yīng)用開發(fā)理念,運用Vue框架構(gòu)建了該項目的成果展示系統(tǒng)。
1 建設(shè)背景
為落實中央《生態(tài)文明體制改革總體方案》,經(jīng)國務(wù)院同意,水利部、原國土資源部下發(fā)了《水流產(chǎn)權(quán)確權(quán)試點方案》(水規(guī)計〔2016〕397號),將甘肅省列為全國水流產(chǎn)權(quán)確權(quán)試點省(區(qū))之一。按照《水流產(chǎn)權(quán)確權(quán)試點方案》,水流產(chǎn)權(quán)確權(quán)在甘肅試點的任務(wù)是在疏勒河流域開展水資源和水域、岸線等水生態(tài)空間確權(quán)工作。疏勒河流域干流水域岸線水生態(tài)空間確權(quán)成果豐富,建設(shè)一個基于上述成果的展示系統(tǒng),對項目成果進(jìn)行可視化展示及管理。展示系統(tǒng)建設(shè)需將成果統(tǒng)一規(guī)范整理,通過“一站式”瀏覽的方式實現(xiàn)查詢、統(tǒng)計、地圖瀏覽、圖層控制等功能。
2 系統(tǒng)設(shè)計
2.1 系統(tǒng)框架設(shè)計
疏勒河水域岸線水生態(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ǔ)測繪數(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ù)層的實現(xiàn)基于Spring Boot微服務(wù)、地圖服務(wù)開發(fā)基于ArcGIS Enterprise;應(yīng)用層:主要是成果展示系統(tǒng)的各個功能模塊。應(yīng)用層系統(tǒng)開發(fā)基于Vue.js框架。
2.2 功能設(shè)計
疏勒河流域干流水域岸線水生態(tài)空間確權(quán)成果包括基礎(chǔ)測繪成果、劃界成果、自然資源調(diào)查成果、涉水工程成果、岸線功能區(qū)劃分成果、登記平臺成果、文檔成果等,成果類型包括文檔、圖片、影像、地形圖、數(shù)據(jù)庫等。
根據(jù)以上成果分類,將系統(tǒng)功能分為地圖基本功能和業(yè)務(wù)模塊功能,其中業(yè)務(wù)模塊功能包括成果簡介、基礎(chǔ)測繪、劃界成果、自然資源、涉水工程、岸線功能區(qū)、登記平臺、文檔報告8個模塊。
3 系統(tǒng)開發(fā)
3.1 地圖服務(wù)開發(fā)
電子地圖制作完成后,對其進(jìn)行瓦片制作。地圖瓦片(tile)是WebGIS中常使用的一種技術(shù),通過地圖瓦片可以有效縮短服務(wù)器的地圖生成時間和地圖傳送時間,提高系統(tǒng)相應(yīng)速度,以此實現(xiàn)電子地圖的網(wǎng)絡(luò)共享,提升電子地圖的訪問效率。
電子地圖的切片在ArcGIS Server中完成,參照互聯(lián)網(wǎng)地圖分級設(shè)置,結(jié)合本次電子地圖數(shù)據(jù)范圍,分別對制作的基礎(chǔ)底圖、專題地圖進(jìn)行瓦片裁切,切片級別從L9至L17。
使用ArcGIS Server進(jìn)行地圖服務(wù)的發(fā)布、管理,在軟件層面上實現(xiàn)地圖服務(wù)訪問的負(fù)載均衡。方便后期地圖服務(wù)器節(jié)點擴(kuò)展,地圖服務(wù)器的冗余增加了地圖服務(wù)訪問的可靠性。
3.2 系統(tǒng)功能開發(fā)
基于Vue框架和Element組件,結(jié)合HTML5技術(shù)、Ajax異步傳輸技術(shù)、Webpack、ECMAScript6標(biāo)準(zhǔn)、Node.JS等進(jìn)行前端開發(fā)。系統(tǒng)主界面如圖2所示,左側(cè)為業(yè)務(wù)模塊導(dǎo)航欄,中間區(qū)域為地圖展示區(qū)域,上方為成果展示系統(tǒng)的名稱,右上角為地圖操作按鈕和退出系統(tǒng)按鈕,系統(tǒng)界面的設(shè)計以用戶使用習(xí)慣為主,界面簡潔易于操作、布局合理、視覺平衡。
4 結(jié)束語
由于GIS應(yīng)用大都以地圖為核心,主要功能也是圍繞地圖實現(xiàn)的,因此利用單頁面技術(shù)進(jìn)行GIS應(yīng)用開發(fā)是比較合適的。在系統(tǒng)開發(fā)過程中使用Vue框架減少了大量的DOM操作,提高了系統(tǒng)的可維護(hù)性,簡化了代碼編寫難度,大幅提高了開發(fā)效率。
參考文獻(xiàn)
[1]鄧雯婷.基于Vue.js構(gòu)建單頁面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]麥冬,陳濤,梁宗灣.輕量級響應(yīng)式框架Vue.js應(yīng)用分析[J].計算機(jī)工程應(yīng)用技術(shù),2017 (7) :58-59.