基于Cesium 的智慧園區(qū)三維可視化系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

彭祥

（武漢郵電科學(xué)研究院，湖北武漢 430073）

隨著智慧城市在我國大力發(fā)展，地理信息系統(tǒng)（Geographic Information System,GIS）在智慧園區(qū)的應(yīng)用從傳統(tǒng)的二維系統(tǒng)發(fā)展到了三維系統(tǒng)[1-5]。由于園區(qū)內(nèi)強(qiáng)弱電信息具有動態(tài)、多維的特點(diǎn)，傳統(tǒng)的二維GIS 系統(tǒng)對此類信息的展示較為單一，往往只能將電力設(shè)備的信息以二維方式展示，而無法實(shí)現(xiàn)對空間、建筑、設(shè)備等的渲染與表達(dá)，導(dǎo)致大量的多維空間信息無法得到利用，具有很大的局限性[6]。作為開源的三維GIS 地圖引擎，Cesium 具有跨瀏覽器、跨平臺的優(yōu)勢，成本更低，效率更高，在輕量級應(yīng)用場景中具有較好適用性[7-12]，同時Cesium 支持三維地球（3D）、二維地圖（2D）以及哥倫布視圖（2.5D），可任意切換模式。強(qiáng)弱電信息的可視化可以通過圖形化方式展示出來，但同時要求實(shí)現(xiàn)對空間位置的查詢、建筑的選擇、監(jiān)測設(shè)備的展示以及場景漫游等功能，從而達(dá)到模擬真實(shí)園區(qū)的視覺效果。例如，傳統(tǒng)的二維系統(tǒng)對于樓層-設(shè)備-人信息的聯(lián)動查詢不夠形象、具體，而三維系統(tǒng)可以真實(shí)地還原園區(qū)內(nèi)建筑物、所處的樓層內(nèi)監(jiān)測設(shè)備位置以及相關(guān)住戶信息，在客戶端可通過對三維系統(tǒng)的旋轉(zhuǎn)、點(diǎn)擊查詢將這些信息清晰地展示出來，大大優(yōu)化用戶的體驗(yàn)感。

因此，以園區(qū)為研究對象，基于Cesium 這一平臺，針對園區(qū)內(nèi)強(qiáng)弱電信息的三維可視化展示，設(shè)計(jì)和實(shí)現(xiàn)了一款以智慧園區(qū)為主題的Web客戶端，該系統(tǒng)三維可視化效果顯著，豐富了社會治理管理方式，減少了人力資源損耗，改善了用戶體驗(yàn)方式，通過智慧園區(qū)的展示證明了未來智慧城市發(fā)展的必要性。

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

1.1 系統(tǒng)結(jié)構(gòu)設(shè)計(jì)

根據(jù)智慧園區(qū)三維可視化系統(tǒng)項(xiàng)目的需求分析，該系統(tǒng)將采用B/S（Browser/Server），即瀏覽器和服務(wù)器框架，至上而下分為表現(xiàn)層、服務(wù)層、數(shù)據(jù)層、支撐層，如圖1 所示。表現(xiàn)層即根據(jù)項(xiàng)目需求將園區(qū)內(nèi)強(qiáng)弱電設(shè)備劃分成多個模塊，實(shí)現(xiàn)對數(shù)據(jù)的實(shí)時展示、查詢、定位、報(bào)警提示以及場景漫游等功能；服務(wù)層即基于應(yīng)用服務(wù)器和Web 服務(wù)器選用Tomcat來實(shí)現(xiàn)對數(shù)據(jù)庫的數(shù)據(jù)訪問；數(shù)據(jù)層即實(shí)現(xiàn)對海量的三維模型數(shù)據(jù)和各類監(jiān)測數(shù)據(jù)的存儲及訪問，包括屬性數(shù)據(jù)和空間數(shù)據(jù)，很好地承接了對表現(xiàn)層和服務(wù)層的數(shù)據(jù)支持；支撐層則為系統(tǒng)的開發(fā)提供硬件與軟件設(shè)備的支持。整個系統(tǒng)以谷歌地圖作為地圖，三維數(shù)據(jù)模型采用glTF 和3D Tiles，同時采用MySQL 數(shù)據(jù)庫來存儲屬性數(shù)據(jù)和空間數(shù)據(jù)，以方便增刪查改。

圖1 系統(tǒng)結(jié)構(gòu)設(shè)計(jì)圖

1.2 系統(tǒng)功能設(shè)計(jì)

根據(jù)智慧園區(qū)系統(tǒng)項(xiàng)目需求分析，系統(tǒng)在功能設(shè)計(jì)方面主要采用模塊化的形式在Web 前端進(jìn)行可視化展示。模塊化展示能夠方便客戶端查詢與信息展示，優(yōu)化了系統(tǒng)功能，該系統(tǒng)的客戶端功能模塊設(shè)計(jì)圖如圖2 所示。

圖2 功能模塊設(shè)計(jì)圖

按照功能來看，該系統(tǒng)主要涉及到七大模塊：動力設(shè)備模塊、環(huán)境設(shè)備模塊、監(jiān)控設(shè)備模塊、門禁設(shè)備模塊、消息推送模塊、輔助功能模塊及平臺信息查詢模塊。

客戶端主要實(shí)現(xiàn)的功能包括：

1）動力設(shè)備模塊和環(huán)境設(shè)備模塊通過Echarts圖表可視化MySQL 數(shù)據(jù)庫中的數(shù)據(jù)，提供直觀、生動、可交互的數(shù)據(jù)可視化圖表，豐富了交互功能和可視化效果，這兩個模塊分別用來展示分布式光伏、全釩液流儲能、微風(fēng)微光智能電站、新能源汽車充電站、智慧照明、溫濕度監(jiān)測及水質(zhì)監(jiān)測等數(shù)據(jù)；

2）監(jiān)控設(shè)備模塊主要分為園區(qū)內(nèi)多方位監(jiān)控和立體倉庫全景監(jiān)控，以實(shí)現(xiàn)對園區(qū)的實(shí)時監(jiān)控管理，基于Cesium 平臺，通過導(dǎo)入監(jiān)控設(shè)備glTF 三維模型至指定位置，真實(shí)還原現(xiàn)實(shí)園區(qū)內(nèi)對監(jiān)控設(shè)備的布局。在客戶端前端點(diǎn)擊指定的glTF 三維模型監(jiān)控設(shè)備能夠調(diào)出實(shí)時監(jiān)控畫面，其功能包括視頻切換、視頻播放及視頻關(guān)閉等[13]；

3）門禁設(shè)備模塊和監(jiān)控設(shè)備模塊均以一樣的方式進(jìn)行模型導(dǎo)入和布局，其功能識別模式采用ID卡、人臉及指紋識別，門禁可通過任一方式解除，通過遠(yuǎn)程網(wǎng)絡(luò)視頻在Web 前端以懸浮框的形式進(jìn)行實(shí)時監(jiān)控；

4）平臺信息查詢主要通過手動查詢來獲取各個模塊的實(shí)時數(shù)據(jù)以及歷史數(shù)據(jù)；

5）消息推送模塊主要分為設(shè)備故障告警和歷史數(shù)據(jù)處理兩項(xiàng)內(nèi)容，當(dāng)設(shè)備發(fā)生故障或歷史數(shù)據(jù)未處理，告警顯示框?qū)棾銮也煌ｉW爍，直到數(shù)據(jù)恢復(fù)正常且告警彈出框停止閃爍；

6）輔助功能模塊主要分為場景漫游、園區(qū)分層及增刪模型處理三項(xiàng)內(nèi)容。園區(qū)內(nèi)場景漫游即基于Cesium 實(shí)現(xiàn)的三維漫游飛行效果，通過點(diǎn)擊場景漫游按鈕則可實(shí)現(xiàn)智慧園區(qū)360°漫游。園區(qū)分層即通過選擇對應(yīng)樓層的ID 實(shí)現(xiàn)所在ID 樓層的所有設(shè)備及設(shè)備對應(yīng)屬性數(shù)據(jù)的展示。增刪模型處理則主要用以實(shí)現(xiàn)模型的添加與刪除功能。

1.3 系統(tǒng)數(shù)據(jù)庫設(shè)計(jì)

MySQL 是目前最流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一，在Web 應(yīng)用方面，MySQL 也被視為最優(yōu)秀的應(yīng)用軟件之一。MySQL 具有體積小、速度快、總體擁有成本低等特點(diǎn)。目前所知的Cesium 所支持的模型數(shù)據(jù)類型包括glTF、glb、bglt 以及3D Tiles 格式數(shù)據(jù)。其中添加的glTF、glb、bglt 模型本身是不具備任何屬性的，只有通過引入MySQL 來存儲模型屬性，引入后點(diǎn)擊數(shù)據(jù)庫模型時便能調(diào)用MySQL 里的屬性數(shù)據(jù)[14]。由于該系統(tǒng)數(shù)據(jù)采集量較大，因此只列出部分?jǐn)?shù)據(jù)來源，如表1 所示。

表1 數(shù)據(jù)來源

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

2.1 開發(fā)方法

該系統(tǒng)以基于JavaScript 編寫的Cesium 三維地圖引擎為平臺，將Visual Studio Code 作為開發(fā)工具，以node.js 內(nèi)置的http-server 開啟Web 服務(wù)器，使用3D Max 作為建模軟件，引入Echarts.js 用于統(tǒng)計(jì)圖項(xiàng)目工具，以底層MySQL 數(shù)據(jù)庫作為基礎(chǔ)，來存儲傾斜三維模型的屬性數(shù)據(jù)和空間數(shù)據(jù)，采用HTML、CSS、JavaScript 等開發(fā)語言來實(shí)現(xiàn)園區(qū)內(nèi)強(qiáng)弱電信息在Web 前端的可視化展示。

Cesium 支持加載的影像有天地圖、谷歌影像及高德等，該系統(tǒng)是以谷歌影像為基礎(chǔ)進(jìn)行編譯的，比Cesium 自帶的影像分辨率更高，同時Cesium 支持三維地球（3D）、二維地圖（2D）以及哥倫布視圖（2.5D），且可任意切換模式。

2.2 三維模型數(shù)據(jù)處理

Cesium 內(nèi)置了一些glTF 格式的3D 模型，如飛機(jī)模型、汽車模型、人物模型、熱氣球模型及奶牛卡車模型等，這些模型可通過viewer.entities.add()函數(shù)在前端頁面加載顯示。同時entity 支持所有的面和體，通過entity 可以繪制任意形狀圖形進(jìn)行加載、隱藏、修改、去除及雙擊事件等操作。

該項(xiàng)目通過3D Max 建模軟件對園區(qū)內(nèi)建筑物和監(jiān)控設(shè)備進(jìn)行渲染、打光、布局，模擬出真實(shí)的園區(qū)，然后導(dǎo)出*.dae 格式和*.obj 格式的文件，最后對這兩種格式文件進(jìn)行轉(zhuǎn)換，以生成Cesium 所支持的格式[15]。三維模型數(shù)據(jù)處理流程如圖3 所示。

圖3 三維模型數(shù)據(jù)處理流程圖

首先安裝colladaToglTF.exe，然后通過cmd 進(jìn)入colladaToglTF.exe 所在的文件夾進(jìn)行轉(zhuǎn)化，*.dae 格式轉(zhuǎn)*.glTF 格式，如圖4 所示。

圖4 .glTF格式模型轉(zhuǎn)化圖

確保已經(jīng)安裝Node 命令行工具，然后通過cmd進(jìn)行轉(zhuǎn)換，*.obj 格式轉(zhuǎn)*.b3dm，同時導(dǎo)出默認(rèn)的屬性表(一個JSON 文件)，如圖5 所示。瓦片數(shù)據(jù)的全部節(jié)點(diǎn)信息包含于JSON 文件中，其中children 代表子瓦片屬性，bounding Volume 代表包圍體屬性。

圖5 3D Tiles模型轉(zhuǎn)換圖

2.3 空間數(shù)據(jù)與屬性數(shù)據(jù)處理

空間數(shù)據(jù)處理方式即通過建好的三維模型，將原始數(shù)據(jù)轉(zhuǎn)換為3D Tiles 數(shù)據(jù)，然后在前端頁面加載顯示。3D Tiles 是在glTF 的基礎(chǔ)上加入了多細(xì)節(jié)層次（Levels of Detail，LOD）的結(jié)構(gòu)生成的，是可以加載海量地理數(shù)據(jù)流和渲染的一種格式，將*.obj格式轉(zhuǎn)換后生成的單一JSON文件可以設(shè)置自定義屬性表，通過在Web前端點(diǎn)擊三維模型自定義屬性表將以懸浮框的方式展現(xiàn)。屬性數(shù)據(jù)處理即把采集到的數(shù)據(jù)錄入到MySQL數(shù)據(jù)庫中與對應(yīng)的三維模型綁定在一起，通過對三維模型設(shè)置ID號來讀取數(shù)據(jù)庫中的數(shù)據(jù)，以查詢點(diǎn)擊的方式將三維模型以懸浮框的方式展現(xiàn)給用戶。

2.4 輔助功能

1）場景漫游主要通過創(chuàng)造對象Cesium，繪制工具創(chuàng)建對象drawHelper，界面監(jiān)聽事件InitEvent()和漫游列表信息loadData()等方法來實(shí)現(xiàn)，通過在Web前端點(diǎn)擊Floor select action，然后以攝像機(jī)視角的水平方向360 度，垂直方向180 度圍繞園區(qū)進(jìn)行旋轉(zhuǎn)，使用戶能夠全方位地游歷園區(qū)以及感受園區(qū)內(nèi)部場景，優(yōu)化了用戶的體驗(yàn)感。

2）增刪模塊處理通過Viewer 的entities 在線添加glTF 模型，通過ajax 調(diào)用后臺方法將所添加的類型及經(jīng)緯度存儲至MySQL 數(shù)據(jù)庫[16]，為客戶端對園區(qū)建筑物和監(jiān)控設(shè)備的布局以及增刪查改提供操縱方便。

3）園區(qū)分層即建模時，以樓層為單位將其一層一層導(dǎo)入到Web 前端，每一層設(shè)置一個ID 號，通過Switch()多分支選擇語句來實(shí)現(xiàn)點(diǎn)擊樓層ID號，以顯示想要查看的樓層信息的功能，該項(xiàng)目只設(shè)定了eight Floor、nine Floor、ten Floor。系統(tǒng)初始界面如圖6所示。

圖6 系統(tǒng)初始界面

3 結(jié)束語

近幾年我國正大力發(fā)展智慧城市，而智慧園區(qū)也成為發(fā)展的必然趨勢。傳統(tǒng)的二維平臺日漸式微，三維可視化平臺無疑為智慧城市提出了一種新的建設(shè)思路，為發(fā)展智慧城市注入了新鮮血液。

該系統(tǒng)的創(chuàng)新在于基于Cesium 平臺將園區(qū)內(nèi)建筑以及監(jiān)測設(shè)備以3D 模型方式展示，從而把真實(shí)場景以模擬空間還原，將園區(qū)內(nèi)強(qiáng)弱電信息從傳統(tǒng)二維單一模式展現(xiàn)變?yōu)橐匀S可視化方式在Web 前端進(jìn)行展示，實(shí)現(xiàn)對園區(qū)內(nèi)建筑-設(shè)備-人信息的聯(lián)動查詢及數(shù)據(jù)可視化分析。實(shí)驗(yàn)表明，基于Cesium平臺的三維智慧園區(qū)為智慧城市的研究與發(fā)展提供了一種新方法、新思路。但是在項(xiàng)目應(yīng)用過程中還存在一定的問題，模型渲染問題不足及模型加載過于緩慢的問題是筆者的下一個研究方向。