劉 勇 王偉玲 許洪健

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

1 背景概述

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

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

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

2 系統(tǒng)設計

2.1 應用架構

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

圖1 BIM+GIS 應用架構圖

2.2 技術棧

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

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

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

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

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

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

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

3 組件拆分

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

圖2 React 組件拆分圖

3.1 主頁組件

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

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

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

3.2 頭部組件

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

3.3 地圖組件

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

3.3.1 Cesium 初始設置

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

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

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

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

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

3.3.3 地圖繪制

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

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

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

3.4 側邊欄組件

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

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

3.5 底部組件

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

4 展示效果

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

5 結語

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

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