基于CesiumJS 和Electron 框架的三維可視化信息平臺構建

李佳俊，黃祥志 ，趙亞萌 ，雷國業 ，趙小明

（1.中國科學院大學電子電氣與通信工程學院，北京 101400；2.中國科學院空天信息創新研究院遙感衛星應用國家工程實驗室，北京 100020；3.中科空間信息廊坊研究院，河北 廊坊 065001）

近年來，隨著科技水平的不斷提高，遙感作為綜合性的探測技術，數據獲取能力得到有效提升，數據規模已邁向 PB 級［1，2］。針對海量多源異構的空間數據，如何進行高效組織、管理及可視化已經是當前研究的熱點問題。與此同時，數據以二維方式進行展示時可視性與表達性存在短板，空間數據的三維可視化成為必然趨勢［3］。CesiumJS 作為開源且免費的三維地球可視化框架受到了大家的青睞，也在不同行業、不同領域得到廣泛應用，張曉慶等［4］利用無人機傾斜攝影測量技術獲得的地形數據，構建了利用CesiumJS 水上水下一體化三維河道場景WebGIS 平臺；Mehmet 等［5］基于 CesiumJS 實現了異構的三維城市模型的重構與可視化。通過瀏覽器對這些Web-GIS 平臺訪問較方便，但也有會打開多個無關網頁，其系統本身性能會受影響、容易被爬取數據以及受到惡意代碼植入等突出問題，隨著Electron、Node 等技術不斷完善發展，使上述問題的解決有了可能。

1 關鍵技術

1.1 CesiumJS 多源數據可視化技術

CesiumJS 是基于WebGL 開發的三維地球引擎API，除了在局部模型渲染精度上稍弱于主流的三維圖形庫Three.js 和BabylonJS 外，其在全球尺度的地理空間可視化下具有明顯優勢；與2017 年末發布的 Google Earth Web 相比，CesiumJS 更多地是作為開發框架生產不同需求的軟件產品［6-8］，國外的Celestrak 衛星仿真平臺，國內的天地圖、超圖等平臺的Web 三維地球均借助其開發。

CesiumJS 主要借助 ImageryProvider、TerrainProvider 和DataSourceCollection 3 個基類派生出的不同子類可視化影像、地形、矢量數據，通過Cesium3DTileset 類可視化傾斜攝影測量、點云和建筑模型BIM等三維數據，其架構如圖1 所示。

圖1 CesiumJS 架構

1.2 Electron 跨平臺開發技術

Electron 是跨平臺的原生桌面應用開發框架，使用Web 技術創建的桌面應用運行時，其基于Chromium 和Node 技術，自2016 年發布首個版本以來已經構建了較為豐富且成熟的生態體系。其優點是既能渲染 UI 界面、調用 Web 服務 API，又能實現 Web 程序無法做到的訪問文件系統和調用已編譯模塊（如dll 等）功能［9］；并且能脫離瀏覽器的沙盒機制［10］，防止惡意代碼的注入。Electron 由主進程和零個或多個渲染器進程兩部分組成，主進程對應用的生命周期事件進行響應，并與原生操作系統的API 進行通信；每個渲染器進程以單線程運行，用于渲染GUI 界面，對于操作系統級別API 的訪問需要與主進程進行通信來實現。

目前主流的跨平臺編輯器Visual Studio Code、代碼托管平臺Github 的客戶端程序和國內的網Cesium 實驗室都用到了Electron 框架。

2 應用案例

2.1 基于多源數據的遙感巡河可視化平臺

2.1.1 系統簡介 遙感巡河可視化平臺借助遙感衛星、無人機等高時間、空間分辨率的遙感數據資源對某一范圍內的河流進行常態化、立體式監測，及時發現河流水質、沿河建筑等存在的異常問題，進而保障周邊農、漁等產業的良性發展。本平臺采用數據層、服務層、應用層3 層架構，如圖2 所示，基于CesiumJS和Vue 等主流Web 前端技術開發。

圖2 遙感巡河可視化平臺架構

2.1.2 核心功能及實現效果 無人機遙感巡河功能是模擬無人機按照規定路線和指定高度飛行時，機載相機同步拍攝河流及沿岸狀況并顯示相機不同視角畫面的仿真過程，從而達到巡河目的，實現效果如圖3 所示。主要利用實體集合類的add 方法進行無人機模型和巡河軌跡的添加顯示，通過設置availability 和position 屬性規定巡河時間跨度和巡河位置，關鍵代碼如下。

圖3 無人機遙感巡河功能

衛星遙感變化監測功能是將多時相遙感影像反演得到的信息產品依據時間順序按需或動態加載，展現其空間變化過程。如圖4 所示，以太湖水域藍藻監測為例，時間范圍為2020 年3—6 月，屏幕左側為反演得到的藍藻覆蓋專題信息產品，右側為同期太湖水域高分二號遙感影像，滑動中間分割線可以進行卷簾操作，點擊時間軸的時間節點可以進行圖層的切換，同時通過播放器按鈕可進行多時相數據的滾動播放。以太湖遙感影像加載方式為例，通過addWMTSMapLayer 方法加載WMTS 服務，設置圖層的splitDirection 屬性，將其顯示在分割線右側，關鍵代碼如下。

圖4 太湖藍藻變化監測功能

上述平臺打包后可利用Electron 框架封裝成不同操作系統下的桌面GIS 應用，具體操作時通過修改主進程main.js 中主窗口的loadURL 地址，配置electron-packager 命令下的各參數后再次打包，打包后的程序不會對其原有功能產生影像。

2.2 基于五層十五級數據組織的可視化桌面客戶端

2.2.1 系統簡介 五層十五級數據組織模型是顧行發等［11］提出的一種空間數據組織模型，主要應用在遙感數據工程化領域，其將地球球面按照不同層級的經緯度間隔進行剖分，其優勢是貼合國家基本比例尺，與其他組織模型相比有更小的信息冗余度［12］。目前，該方法已經被用來管理MODIS、Landsat 和高分數據等國內外遙感影像數據［13］。以遙感影像為例，在實際的業務場景中，經過規格化處理后的遙感瓦片的命名格式為“平臺_傳感器_時間_源數據_層級_行_列-光譜類型.格式類型”，且通過分發平臺下載存儲在本地用戶，基于以上2 個要素開發了本套系統，本系統支持對該命名格式的本地數據進行加載，并能于在線與離線2 種模式下進行操作，其基礎功能有圖層管理、地形、量測、鷹眼等，如圖5所示。

圖5 規格化后的GF-2 遙感影像瓦片可視化

2.2.2 核心功能 “2.1”所述系統加載的空間數據來自GIS 服務器或在線資源，本系統在此基礎上主要支持對本地數據資源的讀取與可視化。主要分為以下2 種模式：①讀取指定類型文件，即對文件系統中規格化處理后的GeoJSON、KML、CZML 等格式的矢量數據，PNG、JPEG 等格式的柵格數據以及gltf 格式的三維模型數據的讀取與可視化；②讀取zip 格式的文件壓縮包，即將上述不同類型的數據放置在相同文件夾壓縮后，對壓縮文件進行讀取與可視化。此時涉及Electron 主進程與渲染器進程間的跨進程通信，主要利用了渲染器進程的remote 模塊、主進程的 dialog 模塊以及 Node 的 fs 和 path 模塊，其通信機制如圖6 所示。

圖6 本地文件讀取時的跨進程通信機制

在①中，渲染器進程獲取到本地文件的路徑及文件名后會根據文件的后綴名實例化CesiumJS 相對應的類或接口，根據文件所在路徑進行讀取并顯示在三維地球上；②在①的基礎上，通過npm 的adm_zip 對壓縮文件進行解壓并對解壓后的文件遍歷讀取。圖7 為規格化后的耕地信息矢量數據，點擊地塊要素可以顯示其面積、所在位置、行列號等信息。

圖7 規格化后的本地耕地矢量數據可視化

3 結語

本研究通過對基于CesiumJS 和Electron 框架開發的2 個實際工程項目的介紹，提出在不影響原有系統功能的前提下，利用Electron 技術能夠快速將WebGIS 應用程序打包封裝成桌面GIS 應用程序，能夠擺脫瀏覽器的沙盒機制，提升系統的安全性。與此同時，Electron 與操作系統的可交互性擴展了CesiumJS 的應用功能和場景，如對用戶本地數據可視化的支持。本研究所介紹的案例還集中在空間數據本身可視化層面，未來可以綜合應用2 種技術并通過JavaScript 和其他語言的混合編程來實現空間數據的處理與分析功能，從而提升空間數據的綜合應用水平，實現更好的用戶體驗。