基于CesiumJS的實景三維數(shù)據(jù)可視化實現(xiàn)
2024-06-19 11:05:09李金亮廖菊燕楊紹興楊平
科技資訊 2024年6期
李金亮 廖菊燕 楊紹興 楊平
開放科學（資源服務）標識碼（OSID）：
DOI：10.16661/j.cnki.1672-3791.2312-5042-9706
通信作者：李金亮（1985—），男，碩士，工程師，研究方向為測繪和地理信息應用技術研究。E-mail：394506964@qq.com。
摘要：為達到節(jié)約Web GIS設計和使用成本的目的，通過一套開源軟件的解決方案，重點研究基于CesiumJS將實景三維數(shù)據(jù)在Web端實現(xiàn)可視化，體現(xiàn)實景三維數(shù)據(jù)真實、立體、時序化反映和表達的特點，前端利用Vue3框架，用TypeScript語言快速構建基于網頁的Web GIS應用，并在三維場景中探索屬性查詢、空間分析等技術應用。該研究表明利用CesiumJS將實景三維數(shù)據(jù)在Web端可視化和空間分析的方案完全可行。
關鍵詞：實景三維 Vue3?TypeScript CesiumJS Web GIS
中圖分類號：P208
該研究利用Vue3易學易用，性能出色，適用場景豐富的特點同時結合Typescript語言探索構建實用的Web GIS應用，使用CesiumJS加載豐富的實景三維數(shù)據(jù)和OGC服務后融入Vue3頁面，使數(shù)據(jù)、圖形相得益彰。
1?重要概念
1.1 實景三維
實景三維（3D Real Scene）是對人類生產、生活和生態(tài)空間進行真實、立體、時序化反映和表達的數(shù)字虛擬空間，是新型基礎測繪標準化產品，是國家新型基礎設施建設的重要組成部分，為經濟社會發(fā)展和各部門信息化提供統(tǒng)一的空間基底。實景三維通過在三維地理場景上承載結構化、語義化、支持人機兼容理解和物聯(lián)實時感知的地理實體進行構建。按照表達內容通常分為地形級、城市級和部件級[1]。
1.2 Vue3
Vue3是一款用于構建用戶界面的 JavaScript 框架，它是Vue.js的最新版本，有更好的Typescript支持，基于標準 HTML、CSS 和 JavaScript/Typescript 構建，并提供了一套聲明式的、組件化的編程模型，能夠高效地開發(fā)用戶界面。
1.3 TypeScript
TypeScript是微軟開發(fā)的一個開源的編程語言，通過在JavaScript的基礎上添加靜態(tài)類型定義構建而成。TypeScript通過TypeScript編譯器或Babel轉譯為JavaScript代碼，可運行在任何瀏覽器，任何操作系統(tǒng)。
1.4 CesiumJS
CesiumJS是一個開源的JavaScript庫，用于在Web上創(chuàng)建三維地球和地圖。它提供了一個平臺，可以在瀏覽器環(huán)境中可視化地理空間數(shù)據(jù)，讓開發(fā)人員構建交互式和動態(tài)的3D應用程序。CesiumJS支持許多功能，包括地形渲染、圖像圖層、矢量數(shù)據(jù)可視化、相機控制以及各種地理空間分析能力。在地理空間可視化、虛擬地球和地球科學等領域得到廣泛應用。CesiumJS提供了一個強大而靈活的框架，用于創(chuàng)建豐富的基于Web的三維地理空間應用程序。
1.5 Web GIS
Web GIS（網絡地理信息系統(tǒng)）是指工作在Web網上的GIS，是傳統(tǒng)的GIS在網絡上的延伸和發(fā)展，具有傳統(tǒng)GIS的特點，可以實現(xiàn)空間數(shù)據(jù)的檢索、查詢、制圖輸出、編輯等基本功能，同時也是Internet上地理信息發(fā)布、共享和交流協(xié)作的基礎。
2?實驗前準備
首先在計算機中安裝NodeJS，可以利用nodeJS打包工具和命令來安裝、管理和發(fā)布JavaScript模塊以及管理項目的依賴關系。之后用vue craete?[options]?
3?加載多源異構實景三維數(shù)據(jù)
Vue3項目創(chuàng)建完成以后就可以在vue頁面中將實景三維數(shù)據(jù)可視化了。首先根據(jù)實際需求分類創(chuàng)建vue頁面，在App.vue中利用
CesiumJS可以加載的GIS數(shù)據(jù)類型非常豐富，特別是在加載海量三維數(shù)據(jù)方面具有獨特的優(yōu)勢，在本文中實驗加載了3Dtiles、WMS/WMTS、GeoJson、自繪圖形、CZML、I3S等數(shù)據(jù)資源。通用的前端類庫threejs也能夠加載三維數(shù)據(jù)，但通常用于處理單個三維對象。CesiumJS對WebGL進行了更好的封裝[3]，降低了學習難度，并且CesiumJS包含了大量的針對處理二維和三維的GIS數(shù)據(jù)的內置類，基本上不需要做復雜的擴展和計算就能夠實現(xiàn)豐富的應用。
3.1加載3Dtiles數(shù)據(jù)
3D?Tiles是用于大規(guī)模、異構的三維地理空間數(shù)據(jù)集（如點云、建筑物、攝影測量和矢量數(shù)據(jù)）的開放標準?；趃lTF和其他三維數(shù)據(jù)類型，3D Tiles是一種可流式傳輸、經過優(yōu)化的格式，旨在充分利用當今不斷增長的三維地理空間數(shù)據(jù)的潛力，可交互、可樣式化、適應性強、靈活性高；設計精確，支持最苛刻的分析需求；支持時間動態(tài)，可以可視化或模擬展示隨時間變化的情況；支持各種不同用途的數(shù)據(jù)類型。3D Tiles是開放地理空間聯(lián)盟（OGC）的社區(qū)標準。這些特性使得3D Tiles成為處理和展示三維地理空間數(shù)據(jù)的理想選擇[4]。
實際應用中首先通過語句viewer = new Cesium.Viewer（"cesiumContainer"， {terrainProvider： Cesium.createWorldTerrain（），timeline： false，animation： false}）;創(chuàng)建視圖，然后通過視圖加載其他類型的數(shù)據(jù)。3Dtiles數(shù)據(jù)對象（數(shù)據(jù)集）通過Cesium.Cesium3DTileset方法來創(chuàng)建，數(shù)據(jù)源既可以是本地文件也可以是遠程數(shù)據(jù)服務，本文采用Ceiusm ION云平臺上的數(shù)據(jù)資源。最后通過viewer.scene.primitives.add加載數(shù)據(jù)集。在實際生產中，通過傾斜攝影的方法來生產三維數(shù)據(jù)是一種常見的生產模式，而CesiumJS目前還不能直接加載OSGB格式的三維數(shù)據(jù)，但是可以通過開源軟件cesiumlab把OSGB，OBJ等格式轉成3Dtiles然后加載[5]。
CesiumJS在加載3D Tiles數(shù)據(jù)時，默認情況下只會加載可視域（屏幕窗口范圍）內的數(shù)據(jù)。這種方式稱為動態(tài)加載（Dynamic Loading），它是CesiumJS的一個重要特性，旨在提高性能和效率。動態(tài)加載的原理是根據(jù)當前視圖的位置和范圍，只加載和渲染可見的3D Tiles數(shù)據(jù)。當視圖發(fā)生變化時，CesiumJS會自動加載和卸載適應新視圖的瓦片數(shù)據(jù)。這樣可以有效降低數(shù)據(jù)傳輸和渲染的開銷，提高應用程序的加載速度和性能。除了動態(tài)加載可視域內的數(shù)據(jù)，CesiumJS還支持預加載（Preloading）和懶加載（Lazy Loading）的方式。預加載允許在可視域之外的區(qū)域提前加載一些數(shù)據(jù)，以提供更流暢的用戶體驗。懶加載允許延遲加載某些數(shù)據(jù)，直到用戶需要查看或交互時再進行加載。CesiumJS的加載行為可以通過配置選項進行調整和定制。根據(jù)具體需求和應用場景，選擇合適的加載策略和參數(shù)，以達到最佳的性能和用戶體驗。
3Dtiles數(shù)據(jù)加載成功后，充分利用地理實體單體化的優(yōu)勢，利用Cesium.ScreenSpaceEventType事件來提取和展示單體的屬性，對象隱藏、動畫展示等效果（如圖1所示）。
3.2 加載WMS/WMTS/I3s
CesiumJS不僅能加載和展示三維數(shù)據(jù)，還能夠像openlayers/leaflet一樣非常流暢地加載WMS、WMTS等標準OGC服務，也就是說僅依靠CesiumJS開源引擎就能輕松實現(xiàn)二三維一體化[6]。依托WMS數(shù)據(jù)源，利用Cesium.ImageryLayer創(chuàng)建圖層，最后通過viewer.imageryLayers.add添加創(chuàng)建好的圖層。WMTS通過Cesium.WebMapTileServiceImageryProvider來創(chuàng)建圖層，然后通過視圖來添加圖層。
I3s（Indexed 3D Scene Layer）是一種用于存儲和呈現(xiàn)大規(guī)模三維地理空間數(shù)據(jù)的格式和規(guī)范。I3s由Esri（Environmental Systems Research Institute）開發(fā)，用于在地理信息系統(tǒng)（Geographic Information System，GIS）中處理和共享三維數(shù)據(jù)。I3s格式通過使用基于Web的服務和數(shù)據(jù)傳輸技術，提供了一種高效的方式來存儲和傳輸三維場景數(shù)據(jù)。它可以包含地形、建筑物、植被和其他物體等各種類型的數(shù)據(jù)。I3s使用索引和級別（LOD）來組織數(shù)據(jù)，使得用戶可以以自適應的方式加載和渲染不同細節(jié)級別的場景數(shù)據(jù)。使用I3s，用戶可以通過Web瀏覽器或GIS應用程序訪問和瀏覽三維地理空間數(shù)據(jù)。
這使得用戶可以進行交互式的場景探索、空間分析和可視化，同時支持與其他GIS工作流程的集成。通過Cesium.I3SDataProvider來創(chuàng)建數(shù)據(jù)集，然后通過viewer.scene.primitives.add添加數(shù)據(jù)集（如圖2所示）。
I3s服務能夠使用quick_slpk_server來發(fā)布（如圖3所示），這是用Python語言寫的開源軟件。使用也很簡單，只要把slpk文件放在指定的目錄下，直接運行軟件就能發(fā)布。
3.3 加載GeoJson矢量數(shù)據(jù)
GeoJSON是一種用于表示地理空間數(shù)據(jù)的開放標準的格式，基于JSON（JavaScript Object Notation）。它提供了一種簡單而靈活的方式來存儲、傳輸和共享地理特征，如點、線、面以及它們的屬性數(shù)據(jù)。GeoJSON可以通過編寫或生成JSON數(shù)據(jù)來創(chuàng)建和解析。它可以用于存儲和交換各種地理空間數(shù)據(jù)，例如地圖特征、地理標記、地理邊界等。許多地圖庫和GIS軟件都提供了對GeoJSON的支持，使其成為地理數(shù)據(jù)交換和可視化的常用格式。
GeoJson數(shù)據(jù)既可以是本地數(shù)據(jù)，也可以是遠程服務提供的數(shù)據(jù)資源，本實驗加載CesiumJS示例數(shù)據(jù)（本地），加載GeoJson數(shù)據(jù)的語句十分簡單，使用viewer.dataSources.add（dataSource）;dataSource.load（"/path/**"）;實現(xiàn)加載。
3.4 加載自繪圖形
3.5 加載CZML數(shù)據(jù)
CZML（Cesium Language）是一種用于描述Cesium場景的JSON格式。它是CesiumJS的一部分，用于定義和傳輸場景的動態(tài)內容，例如實體（entities）、位置、姿態(tài)、屬性和事件等。CZML提供了一種簡單而靈活的方式來創(chuàng)建和修改Cesium場景。通過使用CZML，可以輕松定義和更新場景中的實體和屬性，以實現(xiàn)動畫效果和交互性。CZML是一個可擴展的格式，使用CZML可以通過編寫和解析JSON數(shù)據(jù)來創(chuàng)建和修改Cesium場景。CZML文件可以直接加載到CesiumJS的Viewer中，或者通過Cesium的API動態(tài)創(chuàng)建和更新場景。CZML格式的數(shù)據(jù)能夠很好呈現(xiàn)實景三維時序化的要求，使用方法非常簡單，用Cesium.CzmlDataSource.load來加載。
4?空間分析
CesiumJS提供了許多內置功能，包括距離量測、體積計算等空間分析。使用這些功能可以輕松實現(xiàn)各種三維場景中的測量和分析操作。
4.1 距離和面積量測
首先在Vue3中繪制幾何圖形時，應該將屏幕坐標轉動態(tài)換為大地坐標，才能確保繪圖和計算的準確性。本文中測量的幾何圖形的高度參考模式都是CLAMP_TO_GROUND，即不管計算長度還是面積都需要考慮地形的影響因素，更加符合實際生產的需求。計算多段線長度時，利用Cesium.sampleTerrainMostDetailed方法進行地形采樣，充分考慮地形對長度的影響，然后將點位的大地坐標轉換為三維直角坐標進行長度的計算。計算多邊形面積時也需要先采樣地形，加入地形影響因素。面積計算使用向量叉乘的方法用于計算多邊形的面積。對于平面上的多邊形，我們可以使用以下公式計算其面積：面積 = 0.5 × Σ（邊向量的叉乘），其中，Σ表示對所有邊向量的叉乘進行求和，邊向量的叉乘可以通過向量的坐標計算得到。具體將其兩個頂點視為向量的起點和終點，然后計算這兩個向量的叉乘，即可得到該邊的貢獻面積。最后將所有邊的貢獻面積相加，即可得到多邊形的總面積。CesiumJS利用這種向量叉乘的方法，根據(jù)地球表面上的點坐標計算多邊形的面積，可以準確計算多邊形在地球表面上的實際面積，考慮到地球的曲率和投影效果（如圖5所示）。
4.2 屬性拉伸
對二維矢量數(shù)據(jù)的某一屬性進行拉伸能夠呈現(xiàn)三維的效果（又被稱為“假三維”或者2.5維），這是一種非常靈活且成本又很低的三維實現(xiàn)方式，?具體通過entity.polygon.extrudedHeight來實現(xiàn)，理論上被縱向拉伸的屬性可以根據(jù)需要任意選擇，只要該屬性的值具有可量化的特點，最好是數(shù)值類型。
4.3 限高分析
限高分析的主要思路就是利用Cesium.ClippingPlaneCollection來創(chuàng)建限高平面，然后通過循環(huán)語句來量化加載每個限高平面，用限高平面去檢驗三維實體的高度，如果限高平面和被檢驗實體的高度發(fā)生沖突就產生明顯的視覺反饋，從未達到限高分析的目的（如圖6所示）。
4.4 二三維場景對比分析
二三維場景對比分析的用戶體驗感優(yōu)于二維場景中的分屏對比，對比效果更加直觀。實現(xiàn)原理也非常簡單，思路也非常清晰，就是Vue3窗口中利用CesiumJS分別創(chuàng)建三維視圖容器和二維視圖容器，三維視圖容器中加載三維數(shù)據(jù)集，二維視圖容器中加載二維數(shù)據(jù)集，然后通過相機設置使兩邊的數(shù)據(jù)集產生聯(lián)動，從而達到分析對比的目的（如圖7所示）。
4.5 透視分析
透視分析通過射線穿越法實現(xiàn)，首先確定觀測點和目標點的三維坐標后，利用Cesium.Cartesian3.subtract來計算兩個點之間的坐標差，然后把坐標差作為入?yún)魅隒esium.Cartesian3.normalize方法中對向量進行歸一化處理，再把歸一化處理的結果作為入?yún)?，利用Cesium.Ray創(chuàng)建射線，最后用射線與觀測點和目標點之間的三維實體進行相交分析，從而判斷兩點之間是否通視（如圖8所示）。
4.6 路徑動態(tài)分析
動態(tài)分析很好地迎合了實景三維對空間表達時序化的要求，在三維場景中添加了時間影響因素。它的實現(xiàn)非常簡單，不需要設計很復雜的邏輯，直接利用CesiumJS中支持的CZML格式數(shù)據(jù)就能達到效果。為了避免程序冗長，CZML中的位置信息，可以單獨存儲一個Json文件，然后通過axios.get方法進行讀取，然后進行計算（如圖9所示）。
5?存在的問題
生成OGC I3s所需的slpk文件還需要借助ArcGIS Pro、FME等商業(yè)軟件，目前作者還沒有成功用開源軟件很方便得生成slpk文件。由于個人水平有限，使用CesiumJS內置類進行空間分析的探索還非常的淺顯，需要進一步挖掘以實現(xiàn)更復雜的空間分析。
6?結語
整個實驗操作下來，大概寫了2000行代碼，數(shù)據(jù)來源部分采用了Cesium ION云平臺上的數(shù)據(jù)和示例數(shù)據(jù)，基本達到了預期的效果?；贑esiumJS將實景三維數(shù)據(jù)在Web端實現(xiàn)了可視化，體現(xiàn)了實景三維數(shù)據(jù)真實、立體、時序化反映和表達的特點，并在三維場景中實現(xiàn)了屬性查詢、空間分析等技術應用。充分體現(xiàn)了利用開源引擎應用實景三維的技術可行性。
參考文獻
[1] 自然資源部辦公廳關于印發(fā)《實景三維中國建設技術大綱（2021版）》的通知[R/OL].（2021-08-11）[2023-12-12].http：//gi.mnr.gov.cn/202108/t20210816_2676831.html.
[2] 羅小飛，銀霞.基于Cesium和傾斜實景數(shù)據(jù)的三維規(guī)劃輔助決策系統(tǒng)實現(xiàn)[J].測繪與空間地理信息，2022，45（11）：116-118.
[3] 任晨宇，臧永立，劉珍珍.基于Cesium引擎鐵路信號運維平臺的可視化研究[J].鐵道標準設計，2021，65（7）：172-178.
[4] The open specification for 3D data[EB/OL].[2023-12-12].https：//cesium.com/why-cesium/3d-tiles/
[5] 李相迎，王建民，馮興浩，等.基于Cesium的空間目標觀測三維可視化平臺.計算機系統(tǒng)應用，2022，31（8）：108–114.
[6] 黃欣然，江文萍，劉一飛，等.Cesium環(huán)境中三維場景數(shù)據(jù)的加載優(yōu)化策略[J].測繪地理信息，2022，47（S1）：94-98.
