基于React_Umi+Cesium框架下的水利工程BIM+GIS的Web端應用實現

劉 勇 王偉玲 許洪健

（1.葛洲壩淮河發展有限公司 息縣 464300 2.中水淮河規劃設計研究有限公司 合肥 230000）

1 背景概述

React 為構建用戶界面的JavaScript 框架，由美國Meta（原Facebook）公司于2013年5月開源，是國內外大型互聯網公司構建“快速響應”Web（瀏覽器）應用程序的首選方式，阿里巴巴、騰訊等開發的大量應用平臺均基于此框架。Umi 是由中國阿里巴巴公司基于React 二次開源的企業級前端應用框架，提供了一整套前端開發解決方案，如配制式路由、簡易數據流、企業級的UI 組件庫等，更貼近業務開發需求。

Cesium 是由美國AGI 公司基于JavaScript 編寫的使用WebGL 的地圖引擎，支持3D、2D、2.5D 形式的地圖展示，可自行繪制地圖圖形、高亮區域，支持3DTiles 模型加載，能提供良好的觸摸支持，且兼容絕大多數的瀏覽器和移動端。利用Cesium 開發包可實現BIM 模型+GIS 地理信息等多種數據格式的整合開發。

多數大型水利工程距離長、覆蓋范圍廣，交叉建筑物多，建設環境條件復雜，涉及參建方眾多，建設管理難度大?；赗eact_Umi+Cesium 框架，融合BIM、GIS 技術，實現GIS 全局場景和BIM 細節在方便輕巧的Web 端可視化展示，增強模型展示真實感和實用性，對工程進度、質量、安全、成本等關鍵信息要素全面監控提供極大助力。

2 系統設計

2.1 應用架構

工程BIM+GIS 應用可分為地圖、BIM 模型和工程數據三大模塊，如圖1所示。地圖模塊的影像地圖使用天地圖作為底圖。天地圖相較其他地圖清晰度更高，企業級API日配額為300 萬/天，充分滿足日常的開發服務。傾斜攝影底圖通過無人機航拍獲得。BIM 模型模塊使用Bentley 軟件，根據項目單元工程分專業進行建模，并獲取BIM 模型數據；工程數據模塊根據施工現場管理需要，開發工程總覽、進度、質量、資金、安全態勢頁面，為現場各項決策提供數據支撐。

圖1 BIM+GIS 應用架構圖

2.2 技術棧

該應用前端框架使用React_Umi，服務端框架為Node_Egg，數據庫為SQLServer。

2.3 數據處理

BIM 模型以及傾斜攝影文件無法直接在Web 端解析，需要借助第三方數據轉換接口，輕量化轉換后3DTiles 才可使用。Cesium 提供了一種3DTiles 的通用格式方案。表1為各原始數據的轉換方式。

表1 數據轉換方式表

2.4 前端第三方庫及插件引用

該應用代碼使用的第三方庫及插件如表2所示。

表2 第三方庫及插件引用表

3 組件拆分

React 編程中，組件拆分是尤為關鍵的一步。好的組件拆分可大幅提高代碼質量，使代碼更易維護。拆分后的組件可進行復用，提升編碼效率。組件架構如圖2所示。

圖2 React 組件拆分圖

3.1 主頁組件

頭部組件：用于展示項目圖標、項目名稱，以及工程態勢的切換

地圖組件：用于BIM+GIS 的融合展示，并通過點、線、面等方式在地圖上畫出項目相關的圖例。

側邊欄組件：用于展示項目各個態勢的詳細信息。

3.2 頭部組件

將工程總覽、進度態勢、質量態勢、安全態勢、資金態勢封裝成子組件，供頭部組件調用展示，并以首頁添加嵌套路由的方式完成頁面渲染。

3.3 地圖組件

Resium 是基于Cesium 二次封裝的React 組件包，能完成React 框架下的Cesium 相關適應性開發。

3.3.1 Cesium 初始設置

地圖組件需要先將Resium 包的View 組件引入，并設置初始參數，設置項如下：

初始設置完成后，設置經緯度和高程數據等地圖點擊事件，以便定位默認視角，為繪制地圖、加載三維數據提供位置信息。

3.3.2 數據加載

Resium 中的ImageryLayer 組件可識別通用地圖瓦片。天地圖瓦片獲取接口為通用標準，將其直接引入，可實現衛星影像GIS 底圖的加載。

通過Resium 中Cesium3DTileset 組件加載BIM模型及傾斜攝影文件，根據三維模型的偏移矩陣參數，確定地圖上的具體位置，Cesium 的Cartographic對象提供了通過模型或傾斜攝影的經緯度和高程，計算偏移矩陣的方法：

3.3.3 地圖繪制

該項目地圖繪制主要包括圖形繪制及工程位置標記。

圖形繪制是通過點擊地圖上建筑物的輪廓，使用3.3.1 節中的點擊事件數據，記錄各點坐標繪制出圖形，對圖形渲染賦色。數據格式遵循Cesium 規范的json 格式，并分別調用GeoJsonDataSource 組件或PolylineGraphics 組件完成面和線的繪制效果。

工程位置標記包含位置坐標圖片和位置名稱，在確定工程的坐標、高程和偏移量后，分別調用BillboardGraphics 和LabelGraphics 組件，并在父組件Entity 內部使用實現位置標記。

3.4 側邊欄組件

通過umijs/plugin-model 插件，一種基于hooks 的范式簡易管理方案，可以將頁面內通用狀態參數存放在/models 文件夾中，使其變為全局共享參數，在各個組件中通過useModel 函數調用或更改全局參數：

頁面內的數據展示通過Antd 中提供的格柵方式進行頁面的flex 布局，保證了在不同分辨率屏幕下的展示效果。

3.5 底部組件

底部組件主要通過Ant-design/charts 提供的數據可視化組件，以圖表方式清晰展示工程各種數據。首先將工程展示數據抽象成橫向柱狀圖、折線圖和餅圖，再二次封裝為數據類組件，以供工程不同態勢組件調用。封裝的橫向柱狀圖組件：

4 展示效果

該應用通過展示工程總覽、進度態勢、質量態勢、安全態勢、資金態勢，讓管理方從多個維度掌握工程的實時狀態。利用BIM+傾斜攝影+實景地圖的技術實現方式，使在建工程信息“躍然紙上”。

5 結語

當前，智慧水利建設已成為水利高質量發展的重要標志和主要抓手，與全社會數字化、智能化的發展和進步共融共生。水利工程數字化作為智慧水利建設的基礎，如何實現多元數據集成并流暢清晰呈現是首當其沖需要解決的問題。

遵循“需求牽引，應用至上”的智慧水利建設要求，水利工程BIM+GIS 在Web 端的應用，融合BIM、GIS、物聯網、人工智能等多源數據，解決了工程數據輕量展示問題，實現了水利工程全生命周期一張圖展示，使工程信息交互更加快速便捷，為智慧水利建設提供了有力技術支撐■