基于Vue.js的單頁(yè)面WebGIS可視化框架

江蘇省南通中等專業(yè)學(xué)校 蘇揚(yáng)

和一般的前端開發(fā)框架相比較，單頁(yè)面程序具有更加良好的交互體驗(yàn)，同時(shí)和WebGIS的應(yīng)用性能相符合。由于單頁(yè)面WebGIS開發(fā)技術(shù)的不斷發(fā)展，使得單頁(yè)面模式得到了廣泛的應(yīng)用。本文主要基于Vue.js對(duì)單頁(yè)面WebGIS可視化框架的設(shè)計(jì)進(jìn)行研究，介紹了WebGIS可視化框架重要組件技術(shù)，提出WebGIS可視化框架需求分析及設(shè)計(jì)方法，實(shí)現(xiàn)單頁(yè)面WebGIS可視化平臺(tái)的開發(fā)，從而提高了WebGIS的開發(fā)效率，給用戶帶來更好的體驗(yàn)，

單頁(yè)面程序主要指各項(xiàng)交互活動(dòng)均在一個(gè)頁(yè)面當(dāng)中完成的Web應(yīng)用，該模式不僅減少了頁(yè)面重復(fù)加載刷新的復(fù)雜性，而且極大的提升了用戶的交互體驗(yàn)感。隨著單頁(yè)WebGIS的廣泛應(yīng)用，適合于開發(fā)單頁(yè)WebGIS的框架也不斷的出現(xiàn)，比如Backbone、Vue.js、React等。本文基于Vue.js，同時(shí)結(jié)合WebPack、Vue-Router等開發(fā)工具，設(shè)計(jì)并且實(shí)現(xiàn)單頁(yè)面WebGIS可視化框架，具有重要的研究意義。

1 WebGIS可視化框架重要結(jié)構(gòu)及組件技術(shù)的研究

(1)WebGIS服務(wù)器。在WebGIS可視化框架中，服務(wù)器是較為重要的組成內(nèi)容，對(duì)WebGIS的應(yīng)用起到了重要的影響，WebGIS服務(wù)器的功能和可擴(kuò)展性都至關(guān)重要。WebGIS服務(wù)器經(jīng)歷了多次發(fā)展變革，三代產(chǎn)品的更新發(fā)展使得WebGIS產(chǎn)品的功能更加的豐富，應(yīng)用范圍也更加的廣泛。目前，WebGIS服務(wù)器產(chǎn)品的主要功能包括：可擴(kuò)展性強(qiáng)、支持高度定制、支持主流的REST接口等[1]。

(2)WebGIS客戶端。WebGIS客戶端主要包括兩個(gè)作用。1)代表系統(tǒng)的最終用戶界面，完成用戶交互以及數(shù)據(jù)顯示等功能。2)執(zhí)行一些分析處理任務(wù)，比如對(duì)地理信息的實(shí)時(shí)分類、熱力圖的生成等。WebGIS客戶端有Web瀏覽器、應(yīng)用程序客戶端以及移動(dòng)客戶端等。

(3)Vue.js。屬于建立用戶界面的漸進(jìn)式框架結(jié)構(gòu)，能夠在前端的框架當(dāng)中實(shí)現(xiàn)一些后端的邏輯操作。Vue.js設(shè)計(jì)模式主要是由下向上進(jìn)行開發(fā)，核心庫(kù)部分主要和視圖層有著密切的聯(lián)系，從何方便和第三庫(kù)以及目前的項(xiàng)目進(jìn)行整合處理。組件化設(shè)計(jì)是其重要的一個(gè)概念，原理和DOM解析類似，把應(yīng)用視圖轉(zhuǎn)化為小規(guī)模且具有獨(dú)立特點(diǎn)的組件。對(duì)于已經(jīng)存在的視圖組件來說，可以對(duì)JavaScript里面的注冊(cè)組件內(nèi)容進(jìn)行修改或者添加組件，而不用修改視圖層的程序內(nèi)容就可以實(shí)現(xiàn)該操作，并且不會(huì)對(duì)視圖層的架構(gòu)帶來任何影響。另外，Vue.js通過虛擬的DOM技術(shù)能夠有效的減少該操作帶來的系統(tǒng)消耗等問題。用戶在開展DOM操作時(shí)，Vue.js會(huì)對(duì)虛擬的DOM的前后變化進(jìn)行識(shí)別分析，極大了提高了系統(tǒng)瀏覽器的性能，從而給視圖的可視化設(shè)計(jì)提供參考。和React等相比較，Vue.js具有輕量級(jí)的特點(diǎn)，易于學(xué)習(xí)和使用。

(4)ArcGIS API for JavaScript。屬于地圖的二次開發(fā)架構(gòu)，能夠用在各類Web端以及移動(dòng)端當(dāng)中的地圖應(yīng)用。ArcGIS API for JavaScript框架主要利用HTML5以及JavaScript進(jìn)行程序的編寫，并且能夠完成WMS、TMS等各項(xiàng)標(biāo)準(zhǔn)的地圖服務(wù)功能，同時(shí)能夠滿足OGC標(biāo)準(zhǔn)的服務(wù)需求。此外，ArcGIS API for JavaScript的功能有幾個(gè)方面：1）框架攜帶的工具有利于快速、方便的開展交互式地圖的應(yīng)用工作。2）通過ArcGIS Server的REST API能夠完成數(shù)據(jù)的顯示、搜索、分析、處理等內(nèi)容。3）利用ArcGIS Server的GP功能可以極大的提升分析結(jié)果的準(zhǔn)確性。4）通過和Web應(yīng)用系統(tǒng)進(jìn)行結(jié)合，能夠構(gòu)建地圖應(yīng)用系統(tǒng)。和OpenLayers等開放性的框架比較而言，ArcGIS API for JavaScript框架結(jié)構(gòu)雖然沒有開放免費(fèi)等特點(diǎn)，但是其功能較多，可開發(fā)性強(qiáng)，確保開發(fā)者能夠在傳統(tǒng)地圖應(yīng)用的基礎(chǔ)上，同時(shí)開展業(yè)務(wù)邏輯以及用戶需求等工作，從而保障組件化開發(fā)工作的順利開展。

(5)Echarts。該框架是國(guó)內(nèi)的一種開源性的JavaScript圖表庫(kù)，可以利用Canvas以及Zrender等庫(kù)完成操作。其中，在信息數(shù)據(jù)較多的場(chǎng)景下，Canvas的應(yīng)用可以表現(xiàn)出更好的性能，所以當(dāng)數(shù)據(jù)可視化設(shè)計(jì)過程中存在較多的重繪操作時(shí)，Echarts圖表庫(kù)具有更好的應(yīng)用效果。此外，Echarts圖表庫(kù)不僅有著多樣化的形式，而且還能夠在GeoJSON地圖當(dāng)中完成數(shù)據(jù)的可視化顯示功能，并且對(duì)大數(shù)據(jù)有著較好的支持效果，和傳統(tǒng)類型的框架結(jié)構(gòu)實(shí)現(xiàn)了性能互補(bǔ)。

2 WebGIS可視化框架需求分析及設(shè)計(jì)

2.1 功能性需求

2.1.1 地圖數(shù)據(jù)可視化的需求

(1)數(shù)據(jù)可視化的實(shí)現(xiàn)以WMS服務(wù)等作為支撐，可以實(shí)現(xiàn)矢量切片等，并且作為底層展示應(yīng)用，可以加入其他類型的數(shù)據(jù)信息；(2)數(shù)據(jù)的可視化需要具有WFS服務(wù)，同時(shí)完成點(diǎn)、線等空間數(shù)據(jù)的可視化操作。由于地圖數(shù)據(jù)的多樣化，還要具備標(biāo)準(zhǔn)化的數(shù)據(jù)格式；(3)地圖數(shù)據(jù)可視化要能夠完成對(duì)GeoJSON的解析，同時(shí)完成矢量圖形的繪制工作。傳統(tǒng)的可視化服務(wù)一般具有傳輸效率低、數(shù)據(jù)處理能力差等劣勢(shì)，而通過使用基于GeoJSON的可視化服務(wù)能夠在最大程度上解決這一矛盾；(4)數(shù)據(jù)的可視化還要能夠和大數(shù)據(jù)可視化工具進(jìn)行有效的結(jié)合應(yīng)用。由于科學(xué)技術(shù)的發(fā)展，地理數(shù)據(jù)具有收集定位、測(cè)繪、遙感地圖等多種功能，因此，單一化的前端可視化庫(kù)已經(jīng)不能滿足現(xiàn)實(shí)的要求，所以可以結(jié)合第三方插件實(shí)現(xiàn)擴(kuò)展等功能[2]。

基于上述分析，利用ArcGIS API for JavaScript當(dāng)作WebGIS前端的開發(fā)庫(kù)，具有多樣化的功能，資料齊全，使得可視化效果得到了顯著的提升。

2.1.2 業(yè)務(wù)屬性數(shù)據(jù)可視化的需求

(1)和地理坐標(biāo)相關(guān)的屬性數(shù)據(jù)主要有對(duì)象名稱、數(shù)據(jù)的類型、數(shù)據(jù)量、坐標(biāo)描述等。此數(shù)據(jù)一般屬于靜態(tài)數(shù)據(jù)，能夠通過列表等形式進(jìn)行展示；(2)地理坐標(biāo)包括觀測(cè)信息以及采集信息等，比如溫度、濕度。此數(shù)據(jù)一般具有時(shí)間屬性，屬于時(shí)態(tài)數(shù)據(jù)，因此只有在時(shí)間特征的基礎(chǔ)上才能實(shí)現(xiàn)其意義，并且以可視化的形式進(jìn)行動(dòng)態(tài)展示；(3)地理坐標(biāo)還具備多維的數(shù)據(jù)信息，其數(shù)據(jù)類型較為復(fù)雜，必須在時(shí)間屬性的基礎(chǔ)上完成數(shù)據(jù)的統(tǒng)計(jì)或者建模分析等，然后把分析之后的內(nèi)容進(jìn)行動(dòng)態(tài)展示。在數(shù)據(jù)分析過程中，需要提供必要的數(shù)據(jù)服務(wù)支撐功能[3]。

基于以上分析可知，各類數(shù)據(jù)可以利用可視化圖表等進(jìn)行交互顯示，其中有柱狀圖、折線圖等。本文利用Echarts作為WebGIS可視化框架的圖表庫(kù)，同時(shí)實(shí)現(xiàn)了圖表樣式的擴(kuò)展操作，增加了熱力圖等圖表可視化的功能。

2.2 非功能性需求

(1)前后端的分離設(shè)計(jì)方案。單頁(yè)面WebGIS可視化框架的設(shè)計(jì)按照前端、后端分離的原則，其中，前端一般應(yīng)用SPA結(jié)構(gòu)，主要完成頁(yè)面的顯示及邏輯分析等；而后端主要完成數(shù)據(jù)的存儲(chǔ)、處理等功能。在前端、后端交互的過程中，交互設(shè)計(jì)主要應(yīng)用JSON、GeoJSON等數(shù)據(jù)模式進(jìn)行傳輸。通過應(yīng)用該設(shè)計(jì)準(zhǔn)則，能夠極大的提升單頁(yè)面WebGIS可視化框架設(shè)計(jì)的靈活性，方便后續(xù)的調(diào)試操作。(2)模塊化及組件化的設(shè)計(jì)方案。WebGIS可視化框架的應(yīng)用程序不僅具有地圖等功能模塊，而且還具有數(shù)據(jù)的輸入和輸出、搜索分析等應(yīng)用功能。模塊化編程主要指根據(jù)產(chǎn)品因素的特點(diǎn)把不一樣的功能模塊結(jié)合在一起，從而產(chǎn)生一定特殊功能的子系統(tǒng)，再把子系統(tǒng)當(dāng)中系統(tǒng)組件，科學(xué)的對(duì)其進(jìn)行整合，最終形成具有多功能的系統(tǒng)或者產(chǎn)品。為了進(jìn)一步提升程序的復(fù)用性，使得系統(tǒng)開發(fā)過程更加的簡(jiǎn)潔，同時(shí)減少系統(tǒng)的耦合性，通過模塊化及組件化的設(shè)計(jì)方案至關(guān)重要[4]。

2.3 整體框架設(shè)計(jì)分析

單頁(yè)面WebGIS可視化框架的整體設(shè)計(jì)利用分層的方式，并且根據(jù)前后端分離設(shè)計(jì)方案。在平臺(tái)功能方面，該平臺(tái)主要包括視圖層、服務(wù)層、數(shù)據(jù)層以及應(yīng)用支撐層等；在邏輯結(jié)構(gòu)上，劃分成前端及后端等。其中，前端有Web地圖、可視化圖表、JavaScript引擎等，能夠?qū)崿F(xiàn)交互等功能，而后端有Web服務(wù)、數(shù)據(jù)庫(kù)等，主要完成數(shù)據(jù)管理、響應(yīng)前端數(shù)據(jù)等功能。

2.4 開放方案設(shè)計(jì)

(1)在后端設(shè)計(jì)過程中，采用Java語言進(jìn)行程序的編寫，摒棄誒利用Spring Boot框架建立RESTful模式的微服務(wù)平臺(tái)；(2)在前端設(shè)計(jì)過程中，利用Vue數(shù)據(jù)的雙向傳輸方式，過程處理主要在框架當(dāng)中的ViewModel層進(jìn)行處理。在Vue層當(dāng)中通過組件設(shè)計(jì)的模式，從而有效的防止出現(xiàn)重復(fù)開發(fā)界面的問題，極大的提升了界面的開發(fā)效率；(3)通過Npm包管理工具進(jìn)行項(xiàng)目整合等工作，并且利用Vue-Cli腳手架完成項(xiàng)目的開發(fā)工作。然后再利用Package.JSON文件實(shí)現(xiàn)JavaScript數(shù)據(jù)庫(kù)的分析整合，從而完成模塊的加載和打包等服務(wù)；(4)Vue工程模塊能夠和ArcGIS API for JavaScript等進(jìn)行結(jié)合處理，完成地圖可視化框架結(jié)構(gòu)的設(shè)計(jì)與開發(fā)，從而給數(shù)據(jù)技術(shù)的使用創(chuàng)造有利的條件；(5)設(shè)計(jì)ArcGIS API for JavaScript和Echarts能夠進(jìn)行融合的插件，通過Echarts保證信息可視化的實(shí)現(xiàn)，同時(shí)在地圖上進(jìn)行顯示；(6)利用JSON當(dāng)作普通數(shù)據(jù)交換的編碼格式，利用GeoJSON當(dāng)作空間數(shù)據(jù)交換的編碼格式，從而完成數(shù)據(jù)的簡(jiǎn)單訪問功能[5]。

3 單頁(yè)面WebGIS可視化平臺(tái)的開發(fā)

3.1 開發(fā)環(huán)境

基于B/S模式進(jìn)行可視化平臺(tái)開發(fā)，通過前端、后端分離設(shè)計(jì)的原則，其中，前端采用Vue.js結(jié)構(gòu)設(shè)計(jì)用戶界面，而后端利用RESTful Web API完成服務(wù)功能，其開發(fā)環(huán)境設(shè)置如表1所示。

表1 開發(fā)環(huán)境設(shè)置Tab.1 Development environment settings

3.2 平臺(tái)功能模塊

利用基于Vue.js的單頁(yè)面WebGIS可視化框架實(shí)現(xiàn)監(jiān)測(cè)綜合管理平臺(tái)。平臺(tái)功能設(shè)計(jì)模塊主要具有監(jiān)控?cái)?shù)據(jù)、檢查人員、應(yīng)急預(yù)案、綜合服務(wù)、系統(tǒng)管理等內(nèi)容，主界面包括地圖可視化區(qū)域以及圖表可視化區(qū)域等。其中，地圖可視化區(qū)域能夠顯示出電子地圖數(shù)據(jù)、底圖數(shù)據(jù)的疊加數(shù)據(jù)等，并且將位置、軌跡以及控制范圍進(jìn)行實(shí)時(shí)的展示；圖表可視化區(qū)域主要顯示檢測(cè)位置的實(shí)時(shí)狀態(tài)有柱形圖、折線圖等。另外，該平臺(tái)具有監(jiān)測(cè)點(diǎn)信息展示界面圖，對(duì)于某一地點(diǎn)來說，地圖上可以得到相應(yīng)的屬性信息面板，并且顯示監(jiān)控信息及結(jié)果，從而了解到監(jiān)測(cè)點(diǎn)的實(shí)時(shí)狀態(tài)。此外，該平臺(tái)能夠?qū)芾砣藛T進(jìn)行監(jiān)測(cè)，主要進(jìn)行工作人員的軌跡跟蹤，并且給管理人員提供反饋信息，從而制定合理的應(yīng)急預(yù)案，防止突發(fā)情況的發(fā)生[6]。

4 總結(jié)

本文通過對(duì)基于Vue.js的單頁(yè)面WebGIS可視化框架的研究，使我們了解到了，隨著單頁(yè)WebGIS的廣泛應(yīng)用，適合于開發(fā)單頁(yè)WebGIS的框架也不斷的出現(xiàn)，和React等相比較，Vue.js具有輕量級(jí)的特點(diǎn)，且易于學(xué)習(xí)和使用。利用Vue.js開發(fā)架構(gòu)完成單頁(yè)面WebGIS可視化框架的設(shè)計(jì)，不僅極大的提高了用戶的體驗(yàn)感，而且使得程序代碼的復(fù)用性以及開發(fā)效率也得到了顯著的加強(qiáng)。現(xiàn)階段，該框架的設(shè)計(jì)僅僅實(shí)現(xiàn)了二維單頁(yè)面WebGIS可視化框架的開發(fā)，功能設(shè)計(jì)較為單一化，因此，在下一步的工作當(dāng)中，需要完成三維單頁(yè)面WebGIS可視化框架的功能設(shè)計(jì)及組件開發(fā)工作，不斷的提高可視化框架的使用性能。