WebGIS原理及開發(fā)-基于開源框架的WebGIS技術(shù) 課件 10-三維WebGIS

基于開源框架的WebGIS技術(shù)WebGIS原理及開發(fā)1.WebGIS概述2.WebGIS基礎(chǔ)技術(shù)3.WebGIS技術(shù)原理4.WebGIS的Web服務(wù)8.OpenLayers進(jìn)階9.移動GIS10.三維WebGIS5.地圖發(fā)布6.WebGIS客戶端開發(fā)7.OpenLayers多源數(shù)據(jù)匯聚11.WebGIS應(yīng)用案例12.未來展望與研究熱點(diǎn)第10章

三維WebGISCesium開發(fā)入門10.4三維WebGIS概述10.1三維WebGIS起源和發(fā)展10.2WebGIS3D引擎10.310.1三維WebGIS概述三維WebGIS是指能對區(qū)域空間內(nèi)的對象進(jìn)行三維描述、分析的WebGIS。三維WebGIS憑借其空間信息展示更為直觀、多維度空間分析功能更加強(qiáng)大的優(yōu)勢，實(shí)現(xiàn)跨業(yè)務(wù)、跨終端的應(yīng)用，提升對地理信息的共享和利用效率。真正的三維WebGIS必須支持真三維的矢量和柵格數(shù)據(jù)模型，支持以數(shù)據(jù)模型為基礎(chǔ)的三維空間數(shù)據(jù)庫，在此基礎(chǔ)上對三維數(shù)據(jù)進(jìn)行空間操作和空間分析。三維WebGIS10.2三維WebGIS起源和發(fā)展三維GIS的興起起源2005年，谷歌地球（GoogleEarth）的發(fā)布，使得三維GIS得到業(yè)界廣泛關(guān)注，在全球范圍掀起一股三維虛擬地球熱潮，三維虛擬地球可視化軟件大量涌現(xiàn)。各應(yīng)用單位建立了大量的三維可視化應(yīng)用系統(tǒng)，與二維GIS相比，三維GIS更接近于人的視覺習(xí)慣，更加真實(shí)，同時三維GIS能提供更多信息，表現(xiàn)更多空間關(guān)系，所以三維可視化應(yīng)用系統(tǒng)很快得到了業(yè)界的青睞。真正的三維WebGIS必須支持真三維的矢量和柵格數(shù)據(jù)模型，支持以數(shù)據(jù)模型為基礎(chǔ)的三維空間數(shù)據(jù)庫，在此基礎(chǔ)上對三維數(shù)據(jù)實(shí)現(xiàn)空間操作和空間分析。發(fā)展問題10.2三維WebGIS起源和發(fā)展二三維一體化GIS豐富了三維建模的方法，實(shí)現(xiàn)了模型多樣化、可視化的表達(dá)實(shí)現(xiàn)功能解決問題技術(shù)整合提供方案整合GIS、DEM、三維景觀建模、三維地質(zhì)構(gòu)模、虛擬現(xiàn)實(shí)、數(shù)據(jù)庫、網(wǎng)絡(luò)通信等技術(shù)。實(shí)現(xiàn)基于C/S、B/S架構(gòu)的真三維地理空間實(shí)體的可視化分析、應(yīng)用和服務(wù)。解決了早期二維GIS、三維GIS相互分離和三維GIS實(shí)用性不足的問題。為真正的高空、地上、地表、地下全方位一體化真三維數(shù)據(jù)管理提供解決方案。10.2三維WebGIS起源和發(fā)展1994年3月，虛擬現(xiàn)實(shí)建模語言（VirtualRealityModelingLanguage，VRML）技術(shù)在日內(nèi)瓦召開的第一屆國際萬維網(wǎng)（WWW）大會上被正式提出。同年10月，在芝加哥舉辦的第二屆國際萬維網(wǎng)（WWW）大會發(fā)布了VRML1.0草案。我國涌現(xiàn)出了一批優(yōu)秀的三維軟件，如VRPIE、Converse3D、WebMax等。2010年上海世界博覽會上，WebMax作為國內(nèi)第一款Web3D發(fā)明專利軟件被指定為唯一使用的Web3D技術(shù)，但是受限于廠商開發(fā)的技術(shù)標(biāo)準(zhǔn)不統(tǒng)一，制約了傳統(tǒng)Web3D的發(fā)展。1996年8月，規(guī)范的VRML2.0在新奧爾良召開的優(yōu)秀三維圖形技術(shù)會議Siggraph'96上被正式公布使用。受限于當(dāng)時的瀏覽器承載能力，VRML2.0無法在瀏覽器上運(yùn)行，因此當(dāng)時并沒有得到大面積推廣使用。2009年8月Khronos組織提出新的3D渲染協(xié)議-WebGL，通過JavaScript和OpenGLES2.0進(jìn)行渲染，利用自身二次封裝的API接口，在Web端調(diào)用設(shè)備GPU進(jìn)行加速渲染?，F(xiàn)如今，WebGL技術(shù)跨平臺性、開源性以及易構(gòu)建性等優(yōu)勢，為三維WebGIS的發(fā)展提供了平臺，解決了三維軟件廠商自身插件的限制，使得Cesium.js、Three.js、Babylon.js等在WebGL基礎(chǔ)上進(jìn)行二次封裝的可視化第三方引擎得到廣泛應(yīng)用。Web3D技術(shù)發(fā)展10.2三維WebGIS起源和發(fā)展WebGIS3D

發(fā)展

Web3D技術(shù)三維WebGISGIS激光雷達(dá)、高分辨率衛(wèi)星、機(jī)載航空攝影測量等多源數(shù)據(jù)獲取技術(shù)的更新，數(shù)據(jù)獲取成本逐漸降低，數(shù)據(jù)獲取和處理的效率提高，一直制約三維GIS發(fā)展的海量數(shù)據(jù)獲取及處理等關(guān)鍵因素得到了解決。

海量信息的組織和調(diào)度，三維空間分析功能逐步實(shí)現(xiàn)，從軟件、硬件到數(shù)據(jù)庫一體化管理、多維數(shù)據(jù)的集成應(yīng)用與動態(tài)可視化技術(shù)發(fā)展、海量數(shù)據(jù)發(fā)布等得到較全面的研究和實(shí)踐，構(gòu)建大范圍乃至全球范圍的三維GIS成為可能。獲取三維地理信息，突破空間信息在二維平面中單調(diào)展示的束縛，三維GIS服務(wù)化，為信息展示和空間分析提供更好的途徑，為各行各業(yè)提供更直觀的輔助決策支持，實(shí)現(xiàn)現(xiàn)實(shí)世界的立體表達(dá)，成為地理信息用戶的主要需求。10.3WebGIS3D引擎CesiumCesium是一個跨平臺、跨瀏覽器的展示三維的javascript庫。Cesium使用WebGL進(jìn)行硬件加速圖形，不需要任何插件支持，只需要瀏覽器支持WebGL。Cesium是基于Apache2.0許可的開源程序，可以免費(fèi)用于商業(yè)和非商業(yè)用途。Cesium提供良好的觸摸支持，能應(yīng)用于絕大多數(shù)的瀏覽器和mobile。Cesium支持全球級別高精度地形和影像服務(wù)；支持人工模型、傾斜攝影、三維建筑物、CAD、BIM、點(diǎn)云數(shù)據(jù)等三維模型的展示；支持繪制各種幾何圖形及二三維場景與時態(tài)動畫效果等。10.3WebGIS3D引擎核心層（Core）：融合了Cesium平臺底層的函數(shù)與協(xié)議庫，包含數(shù)學(xué)與邏輯運(yùn)算代碼及其各種相關(guān)標(biāo)準(zhǔn)協(xié)議與規(guī)范。渲染器層（Render）：融合圖像模型渲染所需的所有功能函數(shù)，例如裁剪、拼貼、紋理映射等。其中Shader著色器，是WebGL利用GPU進(jìn)行高效率的圖像模型渲染的接口。場景層（Scene）：在前兩層的基礎(chǔ)上展示模型及其影像數(shù)據(jù)，主要包含三維地球、模型及影像數(shù)據(jù)以及各種調(diào)配接口和設(shè)置按鈕等，模型數(shù)據(jù)包括傾斜攝影數(shù)據(jù)、遙感影像數(shù)據(jù)、空間地物屬性數(shù)據(jù)等。數(shù)據(jù)層（DataSources）：提供了前端實(shí)體渲染接口，包含點(diǎn)、線、面、球等，是繪制三維模型實(shí)體的工具。Widgets是Cesium框架中內(nèi)置的功能插件，如視圖選擇、全屏展示、數(shù)據(jù)選擇、時間等。Cesium架構(gòu)模型10.3WebGIS3D引擎Three.jsThree.js是一個跨平臺、跨瀏覽器的三維引擎，使用WebGL進(jìn)行硬件加速。Three.js能夠創(chuàng)建正交和透視攝像機(jī)、動畫、幾何體、光影線條等各種三維場景。Three.js提供三維交互功能，幫助完成WebGL實(shí)現(xiàn)過程中復(fù)雜繁瑣的工作，如生成模型頂點(diǎn)坐標(biāo)、矩陣變換、著色器等。10.3WebGIS3D引擎Three.js程序結(jié)構(gòu)01Scene（場景）02Camera（相機(jī)）03Renderer（渲染）所有物體的容器，類似現(xiàn)實(shí)中的舞臺，需要展現(xiàn)的內(nèi)容都在此場景中相機(jī)有很多種類，針對不同應(yīng)用的三維場景需要使用不同的投影方式，即選擇不同的相機(jī)。把場景中的所有物體都在屏幕上繪制出來10.3WebGIS3D引擎數(shù)據(jù)可視化系統(tǒng)響應(yīng)時間用戶操作文件數(shù)據(jù)量Three.jsCesium約3MB約1MB更適合小場景的應(yīng)用包含許多實(shí)用的內(nèi)置對象，方便將數(shù)據(jù)轉(zhuǎn)換為三維空間內(nèi)的實(shí)體對象更靈活的接口，開發(fā)難度更高針對基于地球的大場景提供飛行模擬、雷達(dá)掃描、漫游等動畫效果缺少對數(shù)據(jù)進(jìn)行可視化效果的構(gòu)造函數(shù)慢快小場景交互更流程涉及地球、地形等，交互場景更復(fù)雜，三維球場景更適用10.4Cesium開發(fā)入門建立第一個Cesium應(yīng)用程序--Cesium文件結(jié)構(gòu)CHANGES.md：Cesium每個版本的變更記錄及修復(fù)日志index.html：Web導(dǎo)航首頁，解壓縮文件直接部署服務(wù)器后的入口package.json：包的依賴管理文件，包括包的名稱、版本號、描述、官網(wǎng)url、作者、程序的主入口文件、開發(fā)環(huán)境和生產(chǎn)環(huán)境依賴包列表以及執(zhí)行腳本等README.md：項目的入門手冊，介紹了整個項目的使用、功能等server.js：Cesium內(nèi)置的Node服務(wù)器文件，命令實(shí)際上執(zhí)行的文件Apps文件夾:CesiumViewer：初始化示例；SampleData：所有示例用到的數(shù)據(jù)；Sandcastle：示例程序代碼；TimelineDemo：時間軸示例代碼Build文件夾:üCesium：打包之后的Cesium庫文件（壓縮后）üCesiumUnminified：打包之后的Cesium庫文件（未壓縮）üDocumentation：打包之后的API文檔Source文件夾：核心文件，包含所有類的源碼和自定義Shader（渲染）源碼Specs文件夾：自動化單元測試，采用Jasmine框架ThirdParty文件夾：依賴的外部第三方庫版本：Cesium1.10410.4Cesium開發(fā)入門方式1：Script標(biāo)簽引入方式開發(fā)<link

rel="stylesheet"

href="./Cesium/Widgets/widgets.css"

type="text/css"><script

src="./Cesium/Cesium.js"

type="text/javascript"></script>方式2：Node.js方式開發(fā)1、安裝Vue腳手架，創(chuàng)建相應(yīng)項目2、“npminstallcesium”命令安裝依賴模塊3、配置vue.config.js4、項目中引用import

*

as

Cesium

from

'../../node_modules/cesium'import'../../node_modules/cesium/Build/Cesium/Widgets/widgets.css'window.Cesium=Cesium //定義全局的cesium變量建立第一個Cesium應(yīng)用程序--Cesium引用10.4Cesium開發(fā)入門建立第一個Cesium應(yīng)用程序--第一個頁面步驟1：引入。步驟2：創(chuàng)建dom綁定id。步驟3：初始化viewer。效果：10.4Cesium開發(fā)入門Cesium的常用功能-地形三維地形是描述地球表面及其特征的曲面模型，能夠真實(shí)的反映地表特征。Cesium標(biāo)準(zhǔn)地形提供高分辨率的全球地形數(shù)據(jù)，支持地形光照和水流效果，由TerrainProvider接口調(diào)用。ArcGIS地形從Esri影像服務(wù)高度圖中產(chǎn)生地形數(shù)據(jù)，由ArcGISTiledElevationTerrainProvider接口調(diào)用。VR-TheWorld地形從VR-TheWorld服務(wù)的高度圖中產(chǎn)生，托管服務(wù)器有全球90m數(shù)據(jù)，包括深度測量，VRTheWorldTerrainProvider接口調(diào)用。Cesium0米地形Cesium默認(rèn)的光滑橢球面，沒有實(shí)際的地形，地形高度為0，由EllipsoidTerrainProvider接口調(diào)用。10.4Cesium開發(fā)入門Cesium的常用功能-地形1：Cesium標(biāo)準(zhǔn)地形2：ArcGIS地形3：VR-TheWorld地形4：Cesium0米地形10.4Cesium開發(fā)入門Cesium的常用功能-地圖服務(wù)Cesium支持衛(wèi)星影像數(shù)據(jù)、互聯(lián)網(wǎng)地圖、TMS、WMS、WMTS、單張圖片等服務(wù)數(shù)據(jù)的加載，并提供豐富的地理空間信息和屬性信息，支持影像圖層相關(guān)屬性，如透明度、亮度、對比度、色調(diào)等處理。01ArcGisMapServerImageryProvider：支持ArcGISOnline和Server的相關(guān)服務(wù)02BingMapsImageryProvider：必應(yīng)地圖影像，可以指定mapStyle10.4Cesium開發(fā)入門Cesium的常用功能-地圖服務(wù)03GoogleEarthEnterpriseImageryProvider：使用谷歌Earth企業(yè)RESTAPI提供切片圖像，可與GoogleEarthEnterprise的3DEarthAPI一起使用04GridImageryProvider：展示內(nèi)部渲染網(wǎng)格劃分情況，了解每個切片的精細(xì)度，便于調(diào)試地形和圖像渲染問題05IonImageryProvider：cesiumIon在線服務(wù)，默認(rèn)全局基礎(chǔ)圖像圖層10.4Cesium開發(fā)入門Cesium的常用功能-地圖服務(wù)06MapboxImageryProvider：Mapbox影像服務(wù)，根據(jù)mapId指定地圖風(fēng)格07MapboxStyleImageryProvider：Mapbox影像服務(wù)，根據(jù)styleId指定地圖風(fēng)格08OpenStreetMapImageryProvider：OSM影像服務(wù)，根據(jù)不同的url選擇不同的風(fēng)格10.4Cesium開發(fā)入門Cesium的常用功能-地圖服務(wù)09SingleTileImageryProvider：單張圖片的影像服務(wù)，適合離線數(shù)據(jù)或?qū)τ跋駭?shù)據(jù)要求不高的場景10TileCoordinatesImageryProvider（開發(fā)調(diào)試）：展示內(nèi)部渲染網(wǎng)格切片劃分情況，包括網(wǎng)格切片等級、X、Y序號，便于調(diào)試地形和圖像渲染問題11TileMapServiceImageryProvider：訪問切片圖的REST接口10.4Cesium開發(fā)入門Cesium的常用功能-地圖服務(wù)12UrlTemplateImageryProvider：指定url的format模版，方便用戶實(shí)現(xiàn)自己的Provider。如國內(nèi)的高德，騰訊等影像服務(wù)，OSM也是通過該類實(shí)現(xiàn)的13WebMapServiceImageryProvider：符合WMS規(guī)范的影像服務(wù)都可通過該類實(shí)現(xiàn)14WebMapTileServiceImageryProvider：服務(wù)WMTS1.0.0規(guī)范的影像服務(wù)，都可以通過該類實(shí)現(xiàn)，如天地圖10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)Cesium在空間數(shù)據(jù)可視化方面提供了兩種類型的API，一種是面向圖形開發(fā)人員的原始API，通過Primitive類實(shí)現(xiàn)，稱為PrimitiveAPI；另一種是用于數(shù)據(jù)驅(qū)動的高級（實(shí)體）API，通過Entity類實(shí)現(xiàn)，稱為EntityAPI。相對于PrimitiveAPI，EntityAPI實(shí)現(xiàn)起來更簡單一些。EntityAPI實(shí)際上是對PrimitiveAPI的二次封裝，底層調(diào)用的仍然是PrimitiveAPI，目的是提供靈活、易學(xué)、易用的高性能可視化界面。10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)廣告牌（billboard）盒子（box）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)走廊（corridor）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)圓柱、圓錐（cylinder）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)橢圓（ellipse）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)橢球體（ellipsoid）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)標(biāo)簽（label）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)平面（plane）點(diǎn)（point）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)多邊形（polygon）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)多線段（polyline）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)多線段柱體（polylineVolume）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)矩形（rectangle）10.4Cesium開發(fā)入門Cesium的常用功能-空間數(shù)據(jù)墻（wall）10.4Cesium開發(fā)入門Cesium的常用功能-glTF模型加載glTF模型包括以下三部分內(nèi)容：JSON文件（.gltf）：包含完整的場景描述：節(jié)點(diǎn)層次結(jié)構(gòu)、材質(zhì)（外觀）、相機(jī)（視錐體）、mesh（網(wǎng)格）、動畫（變換操作如選擇、平移操作）、蒙皮（骨骼變換）等。.bin：包含幾何和動畫數(shù)據(jù)以及其他基于緩沖區(qū)的數(shù)據(jù)的二進(jìn)制文件。圖像文件（.jpg、.png）：上述文件需要的紋理貼圖。10.4Cesium開發(fā)入門Cesium的常用功能-glTF模型加載scene：glTF格式的場景結(jié)構(gòu)，通過引用node來定義場景圖。node：節(jié)點(diǎn)，可以包含變換（比如旋轉(zhuǎn)或平移），也可以引用其他節(jié)點(diǎn)，還可以引用網(wǎng)格和相機(jī)，以及描述網(wǎng)格變換的蒙皮。camera：定義了用于渲染場景的視錐體配置。mesh：描述場景中幾何對象實(shí)際數(shù)據(jù)。skin：定義蒙皮的參數(shù)，參數(shù)值通過accessor對象獲得。animation：描述節(jié)點(diǎn)如何隨時間進(jìn)行變換（比如旋轉(zhuǎn)或平移）。accessor：訪問任意數(shù)據(jù)的抽象數(shù)據(jù)源。被mesh、skin和animation元素使用來提供幾何數(shù)據(jù)、蒙皮參數(shù)和基于時間的動畫值。通過引用bufferView對象，來引用實(shí)際的二進(jìn)制數(shù)據(jù)。material：包含三維對象外觀參數(shù)，通常用于三維對象渲染的texture對象。texture：定義一個sampler對象和一個image對象。sampler對象定義了image對象在三維對象上的張貼方式。glTF模型中JSON文件的層次結(jié)構(gòu)10.4Cesium開發(fā)入門Cesium的常用功能-glTF模型加載通過EntityAPI加載glTF通過PrimitiveAPI加載glTF10.4Cesium開發(fā)入門Cesium的常用功能-3DTiles加載3DTiles在glTF的基礎(chǔ)上，加入了分層LOD的概念，可以把3DTiles簡單地理解為帶有LOD的glTF，專門為流式傳輸和渲染海量三維地理空間數(shù)據(jù)而設(shè)計，如傾斜攝影、三維建筑、BIM/CAD、實(shí)例化要素集和點(diǎn)云等。在3DTiles中，一個切片集（Tileset）是由一組切片（Tile）按照空間樹狀結(jié)構(gòu)組織而成的，它至少包含一個用于描述切片集的JSON文件和一個切片文件。其中b3dm和i3dm切片格式是基于glTF構(gòu)建的，它們的切片內(nèi)容在二進(jìn)制體中嵌入了glTF資源，包含模型的幾何和紋理信息，而pnts格式?jīng)]有嵌入glTF資源。切片類型對應(yīng)實(shí)際數(shù)據(jù)b3dm傳統(tǒng)三維建模數(shù)據(jù)、BIM數(shù)據(jù)、傾斜攝影數(shù)據(jù)i3dm一個模型多次渲染的數(shù)據(jù)，燈塔、樹木、道路等pnts點(diǎn)云數(shù)據(jù)cmpt前三種數(shù)據(jù)的復(fù)合（允許一個cpmt文件內(nèi)嵌多個其他類型的切片）10.4Cesium開發(fā)入門Cesium的常用功能-3DTiles加載asset屬性：包含整個切片集的元數(shù)據(jù)對象。properties屬性：包含切片集中每個Feature屬性的對象。geometricError屬性：幾何誤差，用來計算屏幕誤差，確定切片集是否渲染。root屬性：定義了根級的切片。