基于Web AppBuilder的虛擬校園系統設計與實現
——以華南師范大學為例

黃植欽， 舒娛琴， 閆文豪

(華南師范大學地理科學學院，廣州 510631)

基于Web AppBuilder的虛擬校園系統設計與實現
——以華南師范大學為例

黃植欽， 舒娛琴*， 閆文豪

(華南師范大學地理科學學院，廣州 510631)

以華南師范大學校園為研究區域，基于Web AppBuilder框架，結合ArcGIS Server地圖服務、全景圖技術和Cesium三維引擎庫構建了一個網絡虛擬校園系統. 該系統實現了校園全景漫游、三維場景可視化漫游和2.5維地圖信息服務等功能. 實踐證明了基于Web AppBuilder框架能快速實現虛擬校園系統二三維集成開發，有效降低WebGIS應用系統開發難度，并很大程度上提高了開發效率.

Web AppBuilder； 虛擬校園； 2.5維地圖服務； 全景圖技術； Cesium三維引擎庫

隨著數字校園概念的提出和逐步實現，虛擬校園作為數字校園的具體內容，已成為各高校信息化建設研究的熱點之一[1]. 虛擬校園主要有2種表現形式:二維地圖和三維場景. 二維地圖是地圖的傳統表現形式. 三維場景按場景構建方式分為基于圖像與基于圖形這2種方式[2]: 基于圖形的虛擬場景是利用3DMax或 SketchUp建模軟件對校園場景進行建模,如利用SketchUp和ArcGIS Engine實現具有三維空間分析功能的虛擬校園系統[3]、借助3DMax和VRP平臺實現虛擬校園漫游系統[4]；基于圖像的虛擬場景是將全景圖像進行投影變換后進行校園全景展示，如利用全景圖和Flash交互性漫游的優勢構建虛擬校園漫游系統[5]、基于Krpano播放器開發的華東師范大學校園全景系統[6]. 基于圖像的虛擬系統不需要復雜的建模與編程，特別適合于基于真實自然場景的仿真研究. 也有學者利用2.5維地圖的仿真三維效果構建既有偽三維效果又能提供多種功能服務的2.5維虛擬校園服務系統[7].

前人研究主要論述了基于二維地圖、全景圖和三維場景單種地圖表現形式的虛擬校園系統構建的可行性，但網絡虛擬校園系統開發涉及內容較多，存在開發門檻高、系統建設周期較長和擴展性差等問題，針對在一個系統中集3種表現形式于一體的研發試驗成果較少. Web AppBuilder框架提供了一個二維地圖應用系統原型，內部已實現了系統的底層功能，適用于快速構建各種基于地圖服務的應用系統. 但是目前該框架僅支持二維地圖的顯示與操作.

基于提高開發效率、降低開發難度和縮短開發周期的考慮，本文以華南師范大學校園為研究區域，在Web AppBuilder框架的基礎上引入SWFObject庫和Cesium庫進行虛擬校園系統的設計與實現，構建了一個集2.5維地圖、校園全景和三維虛擬場景的虛擬校園系統，以直觀、準確的方式顯示校園空間信息，并提供快捷的地圖服務.

1 關鍵技術

1.1 Web AppBuilder框架

Web AppBuilder for ArcGIS(Web AppBuilder)是由ESRI公司推出的基于ArcGIS API for JavaScript的RIA應用程序框架. 基于該框架只需進行簡單的配置便能搭建起一個WebGIS應用系統原型[8]，使開發者夠擺脫地圖管理、應用配置、組件間的通信等繁重復雜的編程工作，專注于核心業務功能部件(Widget)的開發，大幅度縮短了系統的開發周期[9].

Web AppBuilder框架在邏輯結構上可分解為5個主要的核心對象：配置管理對象ConfigManager，負責加載與解析配置文件(Config.json)，并在解析完成后通過事件驅動機制將配置文件信息傳遞給其他對象；數據管理對象DataManager，負責實現數據的共享使用；布局管理對象LayoutManager，負責初始化系統界面；地圖管理對象MapManager，根據配置文件信息初始化地圖控件并向服務器請求加載地圖數據；功能部件管理對象WidgetManager，根據配置文件信息預加載各個功能部件(Widget).

框架中自帶了部分基礎應用需要的 Widget，能在無需修改框架代碼的情況下完成自定義Widget的集成. Widget之間相互獨立，當一個Widget出現錯誤時并不影響其他Widget的使用，進而保證了系統的穩定性[10].

1.2 全景圖技術

全景圖技術是指利用數碼相機、魚眼鏡頭和全景云臺進行360度定點環繞拍攝后，通過圖像校正與拼接獲取二維圖像，再經過球面變形與透視變形產生虛擬三維效果[11]. 制作全景場景除需要硬件設備外還需要軟件設備的支持. Pano2VR是其中一款常用的全景圖像編輯應用軟件，兼容不同平臺的動畫功能展示，支持多種數據格式輸出，能滿足不同虛擬系統設計與開發[12]. 通過全景圖像編輯應用軟件將多張全景圖制作輸出成Adobe Flash媒體資源再插入到HTML中供用戶瀏覽是目前全景圖、街景圖漫游的主要實現方式之一.

1.3 Cesium庫

Cesium是基于 WebGL的三維地球開源庫，采用JS語言開發，對Ajax功能進行了再封裝，能在不需要任何插件支持下在瀏覽器中創建三維虛擬場景. Cesium支持由OGC制定的網絡服務規范，支持全球高程地形瓦片的可視化及地球水紋效果，擅長動態數據可視化，具有跨平臺跨瀏覽器的優點[13]. Cesium還支持加載3D模型，但是僅支持加載GLTF 格式的3D模型. GLTF格式是由 khronos 組織定義的一種支持OpenGL、WebGL圖形加速標準的3D數據格式，能有效地保證網絡傳輸及網頁顯示效率[14].

2 華南師范大學虛擬校園系統總體設計

華南師范大學網絡虛擬校園系統的面向用戶是學校學生，主要建設目標是建立一個穩定、可擴展并且集校園空間信息的不同表現形式于一體的虛擬校園系統. 系統中需要實現2.5維地圖、校園全景、三維場景的漫游瀏覽控制，地理空間查詢和路徑分析等功能.

2.1 系統功能設計

系統分為2.5維地圖、全景校園和三維校園三大模塊. 各模塊之間相互獨立，系統通過自定義一個功能模塊部件實現不同模塊之間的切換顯示管理. 2.5維地圖模塊需要實現地圖瀏覽控制、輸入查詢、路徑查詢和分類查詢等功能. 全景校園模塊需要實現全景圖的漫游、控制、定位和全景切換. 三維校園模塊需要構建三維虛擬場景并實現虛擬場景漫游. 系統功能如圖1所示.

圖1 系統功能設計圖

2.2 系統整體架構

基于Web AppBuilder框架和ArcGIS Server服務，系統總體架構設計如圖2所示. 本文采用主流的B/S模式，3層結構分為數據層、服務層和應用層.

圖2 系統總體框架圖

應用層即客戶端表現層. 由于 Web AppBuilder框架僅支持二維地圖，本文通過引入SWFObject庫和Cesium三維引擎庫實現Flash全景圖播放與三維場景渲染，使客戶端同時具備展示2.5維地圖、播放360度全景圖與渲染三維虛擬場景的能力.

服務層選擇ArcGIS Server作為GIS應用服務器. ArcGIS Server提供了多種地圖服務并且通過REST API將每個功能服務封裝成唯一對應的資源標識(URI)供客戶端應用程序調用.

數據層采用Geodatabase地理數據庫儲存. 數據庫構建完成后直接上傳至ArcGIS Server服務器. 全景圖數據和三維數據模型以文件方式直接部署在Web服務器供客戶端請求調用.

3 華南師范大學虛擬校園系統的實現

3.1 數據處理

系統需要的數據有二維地圖數據、2.5維地圖數據、全景圖數據和三維數據模型.

二維地圖數據分為建筑數據、校園綠化數據和道路數據. 建筑數據以面狀和點狀圖層儲存，圖層中屬性有建筑序號(作為每棟建筑的唯一標識)、建筑名稱、建筑坐標、建筑樓高和建筑用途描述. 校園綠化數據以面狀圖層儲存，圖層中屬性有綠化地塊序號(作為每塊綠化地塊的唯一標識)、綠化植被名稱和綠化面積. 針對不同的出行方式，道路數據分為步行道路數據和車行道路數據，以線狀圖層儲存，圖層中屬性有道路序號(作為每條道路的唯一標識)、道路名稱和道路長度，利用道路線狀圖構建2個不同的網絡數據集. 將所有數據儲存在Geodatabase數據庫中并上傳至ArcGIS Server發布為地圖服務.

2.5維地圖數據是以二維基礎地圖數據為基礎，通過放置校園地物三維模型后，以正交視圖方式選取正南方向俯角45°渲染獲取的視圖. 三維模型通過3DMax軟件建模獲取. 建模時利用貼圖代替復雜物體的建模，盡量減少模型的大小[15]. 最后在ArcGIS Server中創建地圖緩存提高地圖服務訪問效率.

本文共收集了華南師范大學正門、行政樓和飯堂等10個地點的全景圖. 一部分全景圖是利用數碼相機拍攝后經圖像校正和圖像融合獲取，另一部分則通過網絡共享平臺獲取. 將獲得的所有全景圖導入Pano2VR軟件，并在軟件中設置每張全景圖的基本信息，如正北方向、可觀察視角范圍等，利用皮膚編輯功能實現多張全景圖的顯示、漫游、全景控制、全景定位和全景切換功能，最后將工程輸出為SWF格式文件并上傳至服務器.

由于目前Cesium庫僅支持加載GLTF格式的三維模型，所以需要對3Dmax中的三維模型進行數據轉換. 利用OpenCollada_3dsMax插件和ColladaTogltf轉換工具將建好的建筑模型轉換成GLTF格式儲存. 每個建筑模型都以建筑名稱中文拼音命名，并集中放置在服務器中. 同時創建一個JSON文件作為一個索引文件. JSON文件中每一個數據元素包括了建筑名稱、建筑名稱中文拼音與對應模型的請求地址等信息，供3維地圖模塊快速準確地加載場景模型使用.

3.2 功能實現

3.2.1 2.5維地圖模塊 本模塊實現界面如圖3所示，實現了地圖顯示、輸入查詢、點擊查詢、路徑分析、當前位置、地圖全覽和分類查詢等功能. 由于篇幅原因，本節著重闡述地圖顯示、點擊查詢和路徑分析的實現.

圖3 2.5維地圖模塊界面圖

(1)地圖顯示. 由于Web AppBuilder框架中地圖的顯示與圖層的控制由MapManager負責，只需要修改配置文件便可實現地圖的加載顯示，例如本系統需要加載顯示ArcGIS Server服務中的2.5維校園地圖服務，則在配置文件Config.json中做如下修改：

"map": {

"id": "map", "position":{"left": 0,"top": 0}//地圖控件的顯示位置 "basemaps": //地圖圖層控制，以數組形式表示允許加載多個圖層

[{"id":"MyBaseMap",

"label":"MyBaseMap",

"url":"http://localhost:6080/arcgis/rest/servi-ces/image/image/ImageServer",

"type":"image",//加載影像服務，type為”image”

"index":0 }]

"mapOptions":{"minZoom":17,"maxZoom":19,"logo":false}//地圖初始化參數.

}

MapManager對象封裝了ArcGIS API for Javascript中的核心類esri/map與各種類型的地圖服務圖層類如esri/layers/KMLLayer、WMSLayer、WMTSLayer等，實現了根據配置信息自動完成地圖控件的初始化與圖層的請求、加載和顯示. 此外,通過改進MapManager對象可以增加框架支持的二維地圖服務，例如加載百度地圖、天地圖和谷歌地圖等.

(2)點擊查詢. 用戶通過鼠標點擊地圖查詢地物信息，其步驟分解流程見圖4. 服務器端ArcGIS Server中的MapServer服務提供了根據空間位置進行屬性查詢的URL接口[9]. 客戶端通過監聽地圖點擊事件獲取用戶點擊范圍后向服務器發送請求并處理服務器返回結果. 在ArcGIS API for Javascript中esri/tasks/IdentifyTask類已完成了對該URL接口請求方式的封裝，結合IdentifyParameters類實現點擊查詢功能[16].

圖4 點擊查詢功能時序圖

IdentifyTask對象負責設置ArcGIS Server 的REST服務接口地址、查詢成功或查詢失敗后的回調函數. 查詢范圍、查詢要素類型和容差范圍等由IdentifyParameters對象負責控制. 最后在配置文件中添加相關配置完成該Widget的集成. 點擊查詢功能的關鍵代碼如下：

//新建查詢任務，URL表示服務接口地址.

this.identifyTask=new IdentifyTask(URL);

//創建與設置查詢參數

this.identifyParams=new IdentifyParameters();

//設置容差范圍

this.identifyParams.tolerance=3;

……

// startup 是widget生命周期的其中一部分，代碼表示自widget啟動開始監聽地圖的點擊事件

startup:function(){on.pausable(this.map,"click",lang.hitch(this,this.executeIdentifyTask));}

(3)路徑分析. 路徑分析功能提供了基于步行和車行這2種出行方式，通過輸入的建筑物名稱獲取2棟建筑之間的最短出行路徑，路徑分析功能時序圖見圖5. ArcGIS Server中的Network Analyst服務提供了基于網絡數據集的路徑分析服務接口[9]，在ArcGIS for Javascript中與之對應的是esri/tasks/RouteTask類和esri/tasks/RouteParameter類.

圖5 路徑分析功能時序圖

路徑分析功能的實現方式與點查詢功能相似. 利用HTML進行功能的界面設計，包括出發地輸入框、目的地出入框、導航按鈕和清除按鈕. 在JS文件中通過監聽導航按鈕點擊動作實例化RouteTask對象和RouteParameters對象. 利用RouteParameters對象設置路勁的起點與終點和是否返回詳細結果信息.

//實例化RouteParameters對象

this.routeParams=new RouteParameters();

//設置相關參數

this.routeParams.returnDirections=true;

……

通過RouteTask對象設置服務請求地址. 因為基于步行或車行的方式發布了不同的Network Analyst服務，在實例化RouteTask對象時候傳入不同的Network Analyst服務接口地址完成2種模式的路徑查詢. 最后調用solve(params, callback, errback)方法向服務器發送分析請求:

//實例化RouteTask對象并設置調用服務接口地址

this.routeTask=new RouteTask(URL);

……

//設置路徑分析結果處理方式并發送分析請求

this.routeTask.solve(this.routeParams,function(routeResult){…},function (errResult){…}).

客戶端接收到服務器處理結果時將觸發solve-complete事件并返回一個結果對象RouteResult. RouteResult中包括了路徑的所有信息，如途徑站點、路徑長度和道路名稱等. 通過設置查詢成功響應方式在地圖中顯示最佳路徑.

3.2.2 全景校園漫游 經過數據處理的全景圖數據已是一個可以使用播放器播放的Flash文件. 在瀏覽器嵌入播放Flash文件需要利用SWFObject庫. 該庫完美解決各瀏覽器在HTML中插入Flash播放器的兼容性問題，并提供了以JavaScript形式動態加載Flash文件[17]. Web Appbuilder框架是基于JS編寫的客戶端框架，引入新的JS庫并不會影響框架的穩定性. 所以通過設置Flash文件的請求路徑與播放界面位置，調用SWFObject庫中的embedSWF()方法，實現全景校園漫游功能，最終實現效果見圖6. 3.2.3 三維校園漫游 利用Cesium庫后進行模塊實現開發后集成到框架中. Cesium庫提供了許多有用的三維場景控件與三維虛擬場景互動功能，其中Viewer控件是實現三維虛擬場景的基礎與核心[18]. 利用Viewer控件初始化創建一個三維地球，在此基礎上通過異步請求服務器端的建筑模型數據構建三維虛擬場景.

為避免在構建三維虛擬場景時，瀏覽器因瞬間加載大量模型數據而造成等待時間過長甚至死機的情況. 系統先預加載記錄了所有模型索引信息的JSON文件數據并生成模型列表，待Viewer中的三維地球創建完成后，再根據模型列表異步請求場景模型數據構建三維虛擬校園場景. 每個模型都以一個帶空間屬性的Entity類實體進行加載，可通過鼠標選擇Entity對象查看對應的屬性信息.

Viewer中根據鼠標的操作動作提供了基本的場景漫游響應方式，也可通過Camera對象實現場景的漫游. Camera對象提供了lookDown(amount)、 lookUp(amount)、 lookLeft(amount)、lookRight(amount)、zoomIn(amount)、zoomOut(amount)等方法用于控制場觀察鏡頭位置，通過不同控件的動作響應方式調用對應的場景控制方法進而完成虛擬場景漫游. 三維校園漫游的最終實現效果見圖7.

圖6 全景校園模塊界面圖

圖7 三維校園模塊界面圖

4 總結與展望

本文以華南師范大學校園為研究區域，基于Web AppBuilder框架結合全景圖技術和Cesium庫構建華南師范大學網絡虛擬校園系統，為用戶提供一個全面認識校園布局、快速獲取校園空間信息的新途徑. 實驗證明基于 Web AppBuilder框架的集成式開發大大地提高了WebGIS應用系統的開發效率.

本系統主要針對校園地理信息的利用與校園環境的展示，為用戶提供逼真的校園場景瀏覽與快捷的地理信息查詢，豐富了華南師范大學數字化校園管理的建設內容. 往后應該結合云計算和物聯網技術打造更加高級、智能的智慧校園系統.

[1] 姜真杰,方陸明,吳達勝. 數字校園理念及應用[J]. 吉林師范大學學報(自然科學版),2003,24(2):26-29.

JIANG Z J,FANG L M,WU D S. The idea and application of digital campus [J]. Journal of Jilin Normal University(Natural Science Edition),2003,24(2):26-29.

[2] 舒娛琴,祝國瑞,陳崇成,等. 虛擬地理環境真實感圖形的構建技術[J]. 測繪通報,2003(10):11-14.

SHU Y Q,ZHU G R,CHENG C C,et al. Techniques of constructing realistic graphics in virtual geographic environment[J]. Bulletin of Surveying and Mapping,2003(10):11-14.

[3] 於永東,路明月,許笛,等. 基于GIS的三維虛擬校園設計與實現[J]. 南京信息工程大學學報(自然科學版),2012,4(1):81-86.

YU Y D,LU M Y,XU D,et al. Design and implementation of 3D virtual campus based on GIS[J]. Journal of Nanjing University of Information Science and Technology(Natural Science Edition),2012,4(1):81-86.

[4] 馬賀清,陳建平,于淼,等. VRP 虛擬校園建設及其關鍵技術[J]. 計算機系統應用,2012,21(5):153-157.

MA H Q,CHEN J P,YU M,et al. Construction of virtual campus based on VRP and the key technologies[J]. Computer Systems & Applications,2012,21(5):153-157.

[5] 黃國政. 基于Pano2VR的交互式校園全景漫游系統的研究[J]. 軟件工程師,2015(1):17-18.

HUANG G Z. Research on interactive campus roaming system based on Pano2VR[J]. Software Engineer,2015(1):17-18.

[6] 王延朝. 基于Krpano的三維全景系統的開發和應用[D]. 上海:華東師范大學,2012.

WANG Y C. The development and application of three-dimensional panorama system based on Krpano[D]. Shanghai:East China Normal University,2012.

[7] 陳迅. 2.5維電子地圖的制作與發布[D]. 西安:西安科技大學,2012.

CHEN X. Production and publication of 2.5D electronic map[D]. Xi’an:Xi’an University of Science and Technology,2012.

[8] 許金霞,趙慶展,張清,等. 基于Web AppBuilder的棉田病蟲害信息服務平臺構建[J]. 河南農業科學,2016,45(8):155-160.

XU J X,ZHAO Q Z,ZHANG Q,et al. Construction of information services platform for diseases and insect pets in cotton field based on Web AppBuilder[J]. Journal of Henan Agricultural Sciences,2016,45(8):155-160.

[9] ESRI公司. ArcGIS 10.3 [EB/OL]. (2015-12-21)[2016-11-20]. http://www.esrichina-bj.cn/2015/0416/2997.html.

[10]ESRI公司. Web AppBuilder for ArcGIS[EB/OL]. (2015-02-23)[2016-11-20]. https://developers.arcgis.com/webappbuilder_docs/.

[11] 全政環. 360°全景技術的應用和發展歷程[J]. 電腦知識與技術,2010,6(3):713-715.

QUAN Z H. The application of 360° panoramiv technology and development course[J].Computer Knowledge and Technology,2010,6(3):713-715.

[12] 葉萍萍,羅宏. 基于PTGui Pro、Pano2VR的三維全景圖制作方法與應用[J]. 城市勘測,2012(4):66-69.

YE P P,LUO H. Manufacture methods and application of three-dimensional panoramagram based on PTGui Pro、Pano2VR[J]. Urban Geotechnical Investigation & Surveying,2012(4):66-69.

[13]Cesium開源項目組. WebGL virtual globe and map engine[EB/OL]. (2014-12-25)[2016-11-20]. http://cesiumjs.org/.

[14] 高云成. 基于Cesium的WebGIS三維客戶端實現技術研究[D]. 西安:西安電子科技大學,2014.

GAO Y C. Research of implementation technique of cesium-based WebGIS 3D client [D]. Xi’an:Xidian University,2014.

[15] 王永梅,舒娛琴,胡偉平. 虛擬華師校園三維模型的構建[J]. 華南師范大學學報(自然科學版),2007(4):51-58.

WANG Y M,SHU Y Q,HU W P. Establishment of 3D models for campus of Sourth China Normal University[J]. Journal of South China Normal University(Natural Science Edition),2007(4):51-58.

[16]ESRI公司. ArcGIS for JavaScript 3.2[EB/OL]. (2015-01-15)[2016-11-20]. https://developers.arcgis.com/javascript/.

[17] 孔云峰. 地理視頻數據模型設計及網絡視頻GIS實現[J]. 武漢大學學報(信息科學版),2010,35(2):133-137.

KONG Y F. Design of geovideo data model and implementation of web-based videoGIS[J]. Geomatics and Information Science of Wuhan University,2010,35(2):133-137.

[18] 牛藝博. 基于WebGL的地理信息三維可視化技術研究[D]. 蘭州:蘭州交通大學,2015.

NIU Y B. Research on technologies of Geographic Information 3D visualization based on WebGL[D]. Lanzhou:Lanzhou Jiaotong University,2015.

【中文責編：莊曉瓊 英文審校:肖菁】

Design and Implementation of the Virtual Campus System Based on Web AppBuilder:A Case Study of South China Normal University

HUANG Zhiqin， SHU Yuqin*， YAN Wenhao

(School of Geography, South China Normal University, Guangzhou 510631,China)

Based on the Web AppBuilder framework, a campus virtual campus system is built by using the campus of South China Normal University as the research area, which combines ArcGIS server map service, panorama technology and Cesium three-dimensional engine library. The system implements campus panorama roaming, 3D scene visualization roaming, 2.5-dimensional map information service and other functions. It is proved that the Web AppBuilder framework can implement the integrated development of the virtual campus system and reduce the development difficulty of the WebGIS application system, and greatly improve the development efficiency.

Web AppBuilder;virtual campus;2.5D map service;panorama technology;Cesium 3D engine library

2016-12-14 《華南師范大學學報(自然科學版)》網址：http://journal.scnu.edu.cn/n

廣東省科技計劃項目(2015A010103013);廣東省研究生教育創新計劃項目(C1087108)

P208

A

1000-5463(2017)04-0122-07

*通訊作者:舒娛琴，教授，Email:shuyq@m.scnu.edu.cn.