李斌 郁婷婷 蔣煊 吳名遠(yuǎn) 張錫貝

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

關(guān)鍵詞： APICloud; 全景; 地圖; 校園

中圖分類號：TP311? ? ? ? ? 文獻(xiàn)標(biāo)識碼：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 引言

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

1 系統(tǒng)設(shè)計(jì)

1.1 客戶端功能設(shè)計(jì)

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

⑴ 地圖展示模塊

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

⑵ 校園信息模塊

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

⑶ 個(gè)人中心模塊

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

1.2 服務(wù)器端設(shè)計(jì)

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

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

2.1 開發(fā)平臺

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

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

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

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

2.2 AUI組件

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

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

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

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

本系統(tǒng)采用APICLoud平臺的MCM模塊從數(shù)據(jù)庫中調(diào)取數(shù)據(jù)。例如在APP中獲取學(xué)院簡介信息，在代碼中要引入MCM模塊進(jìn)行數(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ā)效率，良好的設(shè)計(jì)也使得代碼重用變得更加容易。[3]在使用MCM模塊進(jìn)行數(shù)據(jù)調(diào)取后，運(yùn)用doT.js引擎模板將數(shù)據(jù)添加到模板中，組合形成HTML文件在APP前端上顯示。

2.4 3D模型的制作

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

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

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

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

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

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

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

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

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

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

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

3 結(jié)束語

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

參考文獻(xiàn)（References）：

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

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

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

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

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