基于React_Umi+Cesium框架下的水利工程BIM+GIS的Web端應(yīng)用實現(xiàn)

劉 勇 王偉玲 許洪健

（1.葛洲壩淮河發(fā)展有限公司 息縣 464300 2.中水淮河規(guī)劃設(shè)計研究有限公司 合肥 230000）

1 背景概述

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

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

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

2 系統(tǒng)設(shè)計

2.1 應(yīng)用架構(gòu)

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

圖1 BIM+GIS 應(yīng)用架構(gòu)圖

2.2 技術(shù)棧

該應(yīng)用前端框架使用React_Umi，服務(wù)端框架為Node_Egg，數(shù)據(jù)庫為SQLServer。

2.3 數(shù)據(jù)處理

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

表1 數(shù)據(jù)轉(zhuǎn)換方式表

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

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

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

3 組件拆分

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

圖2 React 組件拆分圖

3.1 主頁組件

頭部組件：用于展示項目圖標(biāo)、項目名稱，以及工程態(tài)勢的切換

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

側(cè)邊欄組件：用于展示項目各個態(tài)勢的詳細信息。

3.2 頭部組件

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

3.3 地圖組件

Resium 是基于Cesium 二次封裝的React 組件包，能完成React 框架下的Cesium 相關(guān)適應(yīng)性開發(fā)。

3.3.1 Cesium 初始設(shè)置

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

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

3.3.2 數(shù)據(jù)加載

Resium 中的ImageryLayer 組件可識別通用地圖瓦片。天地圖瓦片獲取接口為通用標(biāo)準(zhǔn)，將其直接引入，可實現(xiàn)衛(wèi)星影像GIS 底圖的加載。

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

3.3.3 地圖繪制

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

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

工程位置標(biāo)記包含位置坐標(biāo)圖片和位置名稱，在確定工程的坐標(biāo)、高程和偏移量后，分別調(diào)用BillboardGraphics 和LabelGraphics 組件，并在父組件Entity 內(nèi)部使用實現(xiàn)位置標(biāo)記。

3.4 側(cè)邊欄組件

通過umijs/plugin-model 插件，一種基于hooks 的范式簡易管理方案，可以將頁面內(nèi)通用狀態(tài)參數(shù)存放在/models 文件夾中，使其變?yōu)槿止蚕韰?shù)，在各個組件中通過useModel 函數(shù)調(diào)用或更改全局參數(shù)：

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

3.5 底部組件

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

4 展示效果

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

5 結(jié)語

當(dāng)前，智慧水利建設(shè)已成為水利高質(zhì)量發(fā)展的重要標(biāo)志和主要抓手，與全社會數(shù)字化、智能化的發(fā)展和進步共融共生。水利工程數(shù)字化作為智慧水利建設(shè)的基礎(chǔ)，如何實現(xiàn)多元數(shù)據(jù)集成并流暢清晰呈現(xiàn)是首當(dāng)其沖需要解決的問題。

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