李斌 郁婷婷 蔣煊 吳名遠 張錫貝

摘? 要： 介紹了依托APICloud平臺開發(fā)的校園資訊系統(tǒng)。該系統(tǒng)包含校園地圖和校內(nèi)信息模塊。利用720云平臺搭建以天津商業(yè)大學為例的校內(nèi)全景地圖，3D MAX制作校園建筑物的3D模型，調(diào)用高德地圖2D地圖SDK展示學校2D地圖。用戶還可查看關于學校的講座信息、食堂信息、學院簡介、校內(nèi)新聞等校園資訊。對于高校的宣傳也具有積極意義。

關鍵詞： APICloud; 全景; 地圖; 校園

中圖分類號：TP311? ? ? ? ? 文獻標識碼：A? ? ?文章編號：1006-8228（2020）11-35-04

Abstract： This paper introduces the campus information system based on APICloud platform. It includes campus map and campus information module， and uses 720 cloud platform to build the campus panoramic map of Tianjin University of Commerce. The system uses 3D MAX to make 3D models of campus buildings， and calls the 2D MAP SDK of Amap to display the 2D map of the university. Users can also view school lecture information， canteen information， college profile， campus news and other campus information. It also makes positive significance to the publicity of the university.

Key words： APICloud; panoramic; map; campus

0 引言

隨著高校占地面積的擴大，各類建筑設施分布復雜。很多校內(nèi)外人員不了解學校的具體建筑物信息，從而導致一系列不必要的麻煩。本課題利用移動智能終端，展示校園全景、3D建筑模型與2D平面地圖，可以有效地彌補上述不足。還增加了校內(nèi)信息模塊，方便師生和校外來訪人員結(jié)合地圖快速、直觀地了解校園地理環(huán)境和相關服務信息。

1 系統(tǒng)設計

1.1 客戶端功能設計

本系統(tǒng)的功能分為三個大模塊：地圖模塊，校內(nèi)信息模塊，個人中心模塊。系統(tǒng)功能模塊圖見圖1。

⑴ 地圖展示模塊

系統(tǒng)分成三種地圖向用戶全方位展示校園地理信息：2D平面地圖、校園3D模型、校內(nèi)全景漫游地圖。①2D平面地圖。通過調(diào)用高德地圖API，給用戶展示校園2D地圖。②校園3D模型。用戶可查看校內(nèi)建筑物的3D模型。③校內(nèi)全景漫游地圖。用戶可根據(jù)校園全景地圖的熱點指引，在云端漫游校園。

⑵ 校園信息模塊

系統(tǒng)向用戶展示各類校內(nèi)資訊，包括：食堂熱門飯菜信息、校內(nèi)講座信息、學校新聞、學院簡介等。①食堂熱門飯菜信息。高校的食堂數(shù)量眾多，用戶可查看學校各個食堂的熱門飯菜信息。②校內(nèi)講座信息。高校會經(jīng)常舉辦各類講座。系統(tǒng)把近期將要舉辦的講座的主題、舉辦時間、舉辦地點、主講人、講座簡介等信息展示給用戶，方便用戶查看自己感興趣的講座。③學校新聞。用戶可查看校內(nèi)近期新聞，了解學校發(fā)展動態(tài)。④學院簡介。用戶可查看學校各個學院的簡介，所設本科專業(yè)、研究生專業(yè)等內(nèi)容。系統(tǒng)主頁如圖2所示。

⑶ 個人中心模塊

個人中心是每個系統(tǒng)的必備內(nèi)容。本課題系統(tǒng)的個人中心模塊包括：用戶注冊、登錄，用戶頭像上傳，修改個人資料，收藏信息，團隊介紹。效果圖展示如圖3所示。

1.2 服務器端設計

服務器端提供數(shù)據(jù)、圖片及用戶信息?？蛻舳丝呻S時調(diào)用后臺數(shù)據(jù)呈現(xiàn)給用戶。地圖和3D模型的創(chuàng)建、修改、刪除也在后臺進行。

2 系統(tǒng)實現(xiàn)

2.1 開發(fā)平臺

本課題移動端采用APIcloud第3方跨平臺引擎構建，是一種Hybrid APP。[1]系統(tǒng)整體采用C/S架構，依托開發(fā)工具APICloud Studio 2，使用HTML+CSS+ JavaScript + APICloud擴展API，利用APICloud的混合布局渲染機制完成界面和功能開發(fā)。

在界面展示上，Layout實現(xiàn)界面布局，Window和Frame實現(xiàn)頁面設計，UIModule實現(xiàn)界面視圖的展示，還有部分界面效果需要借助輕量級前端框架AUI組件與APICloud所封裝的模塊進行實現(xiàn)，可以盡量減少代碼冗余和復雜度，實現(xiàn)APP高速運行。平臺前端框架如圖4所示。

在功能實現(xiàn)上，APICloud引擎加載解析APIReady事件和所封裝的APICloud API函數(shù)。使用APICloud平臺自帶的API函數(shù)進行參數(shù)調(diào)試，使用JS完成對頁面事件的監(jiān)聽、窗口操作、網(wǎng)絡請求、設備訪問等功能。

模塊化開發(fā)也是APICloud的一大亮點，除了官方的模塊，APICLoud平臺也有大量開發(fā)者提供的模塊。例如本系統(tǒng)中主頁使用的輪播圖，就是引入了UIScrollPicture模塊。

2.2 AUI組件

AUI是一個針對APICloud的CSS前端框架，目前已經(jīng)更新到2.0版本。框架使用彈性響應式布局，采用“容器+布局結(jié)構+控件”的嵌套形式，方便了開發(fā)者快速開發(fā)UI界面。在插入控件前，需要加載AUI組件庫，并在當前HTML文件中添加一段代碼：

href="../../css/aui.2.0.css" />

2.3 數(shù)據(jù)的存儲與獲取

在開發(fā)過程中，前端和后端的交互是APP實現(xiàn)的一大關鍵技術要點[2]。本系統(tǒng)運用APICLoud平臺自帶的數(shù)據(jù)云進行數(shù)據(jù)存儲。數(shù)據(jù)庫中共存放5張關系表：用戶信息表、學院信息表、食堂信息表、講座信息表、校內(nèi)新聞信息表。

本系統(tǒng)采用APICLoud平臺的MCM模塊從數(shù)據(jù)庫中調(diào)取數(shù)據(jù)。例如在APP中獲取學院簡介信息，在代碼中要引入MCM模塊進行數(shù)據(jù)調(diào)用：

var model=api.require（"model"）;

model.findById（{

class： "collegeintroduction"，

id： "1"

}， function（ret， err） {

alert（"ret： " + JSON.stringify（ret） + "＼nerr： "

+ JSON.stringify（err））;

}）;

引入doT.js引擎模板可以讓程序?qū)崿F(xiàn)界面與數(shù)據(jù)分離，這就大大提升了開發(fā)效率，良好的設計也使得代碼重用變得更加容易。[3]在使用MCM模塊進行數(shù)據(jù)調(diào)取后，運用doT.js引擎模板將數(shù)據(jù)添加到模板中，組合形成HTML文件在APP前端上顯示。

2.4 3D模型的制作

3D模型具有直觀性，讓人一目了然，可以讓用戶從各個角度觀察到想看到的任何細節(jié)，這是文字描述以及現(xiàn)場觀察所不能帶來的特點。

團隊建造3D模型使用的工具為3D Studio Max，是一款基于PC系統(tǒng)的三維動畫渲染和制作軟件[4]。利用軟件自帶的“標準幾何圖形”、“樣條線”等建模工具，創(chuàng)造出簡單幾何模型，再經(jīng)過后期修改、打磨出來完整模型。建模步驟如下。

⑴ 規(guī)劃建筑物整體布局，設置建筑的長寬高，建立一個基礎矩形。再分布出窗戶、柱子、門等物件的具體位置，用樣條線將門窗等部位勾勒出來。

⑵ 對于建筑中的一些墻面凸起，選擇該區(qū)域圖面。選擇“擠出”功能，擠出合適距離。再制作門口屋檐及臺階。其中，臺階有很多都是圓形，可以在線上設置多個點，通過拖動點來改變線的弧度，從而變成半圓形臺階。對于門口圓柱，可以新建兩個圓柱體，與門檐相搭配。當框架全部構建完成，開始勾勒小的細節(jié)，例如屋檐的弧度，門口臺階等。

⑶ 準備貼圖工作，首先要準備貼圖的素材。這里有兩個選擇，一種方法是從相關網(wǎng)站里下載貼圖使用，另外一種方法是自己制作貼圖素材。本課題組選擇的是第二種方法，因為第一種方法雖然方便，但是網(wǎng)站上的素材可能會在現(xiàn)實中與實物樣式相差過大，影響用戶的觀看效果。當素材制作完成后，在“材質(zhì)編輯器”中，選擇“位圖”選項，載入素材，將素材貼在模型上。模型貼圖完成后，對模型素材進行渲染，這樣可以讓模型最后的效果顯得更加的真實。

⑷ 模型制作完成后使用第三方平臺“動動三維”導入3D模型進行展示。最終效果如圖5所示。

2.5 全景地圖的實現(xiàn)

全景地圖技術是虛擬現(xiàn)實技術的一個重要分支，具有采集和制作簡單、視角全方位展現(xiàn)、再現(xiàn)性強等優(yōu)點。

首先進行拍攝位置點規(guī)劃，在使用insta 360 one X拍攝后，用Photoshop對拍攝的全景圖進行修飾調(diào)整。然后將處理完的全景圖導入到720云平臺進行全景地圖制作，創(chuàng)建音樂和文字提示信息[5]，制作交互熱點，制作完成后將其在APP中展示。流程圖如圖6所示。

拍照過程中應注意兩點：①應避免圖片中出現(xiàn)干擾性人物;②三腳架應水平放置，以免相機傾斜導致照片銜接不當。

拍攝過后，用軟件導出JPG格式的照片，添加到720云平臺進行場景的連接，并將學校的標志性建筑物標注名稱。在編輯過程中應注意幾點：①要將能看清的人臉和車牌號打馬賽克;②注意連貫性，盡可能將所有路口連接上;③注意建筑物位置的準確性以及銜接性。效果圖如圖7所示。

3 結(jié)束語

本文介紹了一款校園資訊平臺的總體功能架構以及實現(xiàn)系統(tǒng)所需的平臺和關鍵技術。團隊使用模塊化開發(fā)方法，具有一定創(chuàng)新性。校園信息服務系統(tǒng)是學校師生工作、學習、生活的助手。用戶可以通過本款APP全方位地了解校園服務信息，包括校內(nèi)資訊查詢和3D模型展示、校內(nèi)全景導航等內(nèi)容。由于團隊成員時間有限，界面布局等方面還需要進一步測試與優(yōu)化。

參考文獻（References）：

[1] 陳超然，李大軍，杜神斌.基于三維仿真地圖社會管理APP的設計和實現(xiàn)[J].江西科學，2018.36（4）：666-671

[2] 吳敬昌，范夢羽，劉菲，金微，湯壇鳳.高校IT人才引擎APP的設計與實現(xiàn)[J].產(chǎn)業(yè)創(chuàng)新研究，2019.11：288-290

[3] 葉帆帆，徐城璋，王利興，胡宸瑄，楊曉東.基于APICloud的家居設計APP的研究與實現(xiàn)[J].計算機時代，2016.5：59-61

[4] 周正，司占軍，賀瑞玲.3Dmax在虛擬校園模型制作中的設計與應用[J].電腦知識與技術，2019.15（33）：245-246

[5] 董春俠，司占軍.全景圖技術在校園全景漫游中的應用研究[J].電腦知識與技術，2017.13（4）：210-211