基于Cesium 的智慧園區三維可視化系統設計與實現

彭祥

（武漢郵電科學研究院，湖北武漢 430073）

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

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

1 系統設計

1.1 系統結構設計

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

圖1 系統結構設計圖

1.2 系統功能設計

根據智慧園區系統項目需求分析，系統在功能設計方面主要采用模塊化的形式在Web 前端進行可視化展示。模塊化展示能夠方便客戶端查詢與信息展示，優化了系統功能，該系統的客戶端功能模塊設計圖如圖2 所示。

圖2 功能模塊設計圖

按照功能來看，該系統主要涉及到七大模塊：動力設備模塊、環境設備模塊、監控設備模塊、門禁設備模塊、消息推送模塊、輔助功能模塊及平臺信息查詢模塊。

客戶端主要實現的功能包括：

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

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

3）門禁設備模塊和監控設備模塊均以一樣的方式進行模型導入和布局，其功能識別模式采用ID卡、人臉及指紋識別，門禁可通過任一方式解除，通過遠程網絡視頻在Web 前端以懸浮框的形式進行實時監控；

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

5）消息推送模塊主要分為設備故障告警和歷史數據處理兩項內容，當設備發生故障或歷史數據未處理，告警顯示框將會彈出且不停閃爍，直到數據恢復正常且告警彈出框停止閃爍；

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

1.3 系統數據庫設計

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

表1 數據來源

2 系統功能實現

2.1 開發方法

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

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

2.2 三維模型數據處理

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

該項目通過3D Max 建模軟件對園區內建筑物和監控設備進行渲染、打光、布局，模擬出真實的園區，然后導出*.dae 格式和*.obj 格式的文件，最后對這兩種格式文件進行轉換，以生成Cesium 所支持的格式[15]。三維模型數據處理流程如圖3 所示。

圖3 三維模型數據處理流程圖

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

圖4 .glTF格式模型轉化圖

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

圖5 3D Tiles模型轉換圖

2.3 空間數據與屬性數據處理

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

2.4 輔助功能

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

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

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

圖6 系統初始界面

3 結束語

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

該系統的創新在于基于Cesium 平臺將園區內建筑以及監測設備以3D 模型方式展示，從而把真實場景以模擬空間還原，將園區內強弱電信息從傳統二維單一模式展現變為以三維可視化方式在Web 前端進行展示，實現對園區內建筑-設備-人信息的聯動查詢及數據可視化分析。實驗表明，基于Cesium平臺的三維智慧園區為智慧城市的研究與發展提供了一種新方法、新思路。但是在項目應用過程中還存在一定的問題，模型渲染問題不足及模型加載過于緩慢的問題是筆者的下一個研究方向。