基于Vue.js的單頁面WebGIS可視化框架

江蘇省南通中等專業學校 蘇揚

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

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

1 WebGIS可視化框架重要結構及組件技術的研究

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

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

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

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

(5)Echarts。該框架是國內的一種開源性的JavaScript圖表庫，可以利用Canvas以及Zrender等庫完成操作。其中，在信息數據較多的場景下，Canvas的應用可以表現出更好的性能，所以當數據可視化設計過程中存在較多的重繪操作時，Echarts圖表庫具有更好的應用效果。此外，Echarts圖表庫不僅有著多樣化的形式，而且還能夠在GeoJSON地圖當中完成數據的可視化顯示功能，并且對大數據有著較好的支持效果，和傳統類型的框架結構實現了性能互補。

2 WebGIS可視化框架需求分析及設計

2.1 功能性需求

2.1.1 地圖數據可視化的需求

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

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

2.1.2 業務屬性數據可視化的需求

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

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

2.2 非功能性需求

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

2.3 整體框架設計分析

單頁面WebGIS可視化框架的整體設計利用分層的方式，并且根據前后端分離設計方案。在平臺功能方面，該平臺主要包括視圖層、服務層、數據層以及應用支撐層等；在邏輯結構上，劃分成前端及后端等。其中，前端有Web地圖、可視化圖表、JavaScript引擎等，能夠實現交互等功能，而后端有Web服務、數據庫等，主要完成數據管理、響應前端數據等功能。

2.4 開放方案設計

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

3 單頁面WebGIS可視化平臺的開發

3.1 開發環境

基于B/S模式進行可視化平臺開發，通過前端、后端分離設計的原則，其中，前端采用Vue.js結構設計用戶界面，而后端利用RESTful Web API完成服務功能，其開發環境設置如表1所示。

表1 開發環境設置Tab.1 Development environment settings

3.2 平臺功能模塊

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

4 總結

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