李帥-GeoScene Web 3D開發與實踐.pdf

《李帥-GeoScene Web 3D開發與實踐.pdf》由會員分享，可在線閱讀，更多相關《李帥-GeoScene Web 3D開發與實踐.pdf（33頁珍藏版）》請在三個皮匠報告上搜索。

1、GeoScene Web 3D 開發與實踐易智瑞信息技術有限公司 西安分公司技術工程師李 帥目錄 3D 可視化概述 GeoScene 3D Web 開發介紹 GeoScene 3D Web 新特性 GeoScene 3D Web 開發實踐3D應用礦業視頻監控自然資源管理地下管網管理不動產管理城市交通智慧交通應急管理實景三維相對傳統二維更加直觀，可量、可算、場景豐富關系到城市管理、城市規劃、智能交通、智慧園區、物聯網等諸多產業發展的重要應用技術港口調度監控CIMCIM目錄 3D 可視化概述 GeoScene 3D Web 開發介紹 GeoScene 3D Web 新特性 GeoScene 3D

2、Web 開發實踐3D數據呈現 3D Web App能同時展能同時展現現2D&3D數據數據2D：點 線 面3D：激光雷達 傾斜攝影 BIM 影像 Mesh.Map&View3D地圖中的核心要素，定義了場景的內容、樣式、環境等信息可以添加和自定義2D和3D圖層-要素圖層，地圖圖像層，場景圖層，切片圖層，WMS，矢量切片圖層可在GeoScene Online中創建、發布和使用（也可以在GeoScenePro中完成）保存并獲取item IDWebSceneSceneView創建三維視圖3D Web應用中的地圖視圖，使用 WebGL顯示Map或WebScene，完成3D場景中的數據呈現以及用戶交互在三維

3、視圖開始渲染前，地圖中必須存在有效數據，如業務圖層或具有基礎圖層的底圖Ground平臺內置：world-elevation 地形world-topobathymetry 地形和水深Opacity=0.4Ground 類類ground屬性屬性 指定地面如何在SceneView中顯示 地下模式，設置透明度 地圖表面的高程或地形（ElevationLayer，tile layer）“tianditu-vector”Cameracamera:fov:55,heading:0,/翻譯為朝向position:116,40,21000,tilt:10/翻譯為俯仰角,屬性名屬性名作用作用備注備注fov控制鏡頭

4、廣角默認55heading與正北方向順時針的夾角取值范圍0-360position鏡頭的空間位置由xyz三個參數組成一般是WGS84tilt鏡頭與目標的連線與垂線的夾角取值范圍Global：0-90Local：0-180?。哼h射鏡頭，大：魚眼鏡頭ViewingMode 平面模式 任意投影坐標系 支持WGS84和CGCS2000 支持地下模式 曲面視圖 支持WGS84、Web Mercator、CGCS2000 實驗性支持Mars_2000_(Sphere)、GCS_Mars_2000 和 GCS_Moon_2000 支持地下模式localGlobes修改camera屬性來改變3D視圖的范圍更友

5、好的方式進行視圖導航-goTo。goTo函數提供了一種簡單的API來實現平滑的導航動畫特效。goTo(target,options?)goTo函數支持多種不同的數據類型作為target，包括：Number：表示經緯度數值的數組 Geometry/Geometry Graphic/Graphic Viewpoint Camera target,center,scale,zoom,position,heading,tilt Navigation不同類型的場景圖層（Point、3dObject、點云、集成網格、建筑物）：場景圖層（Layers）點云（PointCloudLayer）3D Object

6、（SceneLayer）Point（SceneLayer） 對象，用逼真的紋理表示建筑和自然的3D特征Elevation Info 垂直方向數據層對齊的方式 on the ground：貼地表模式，若場景包含三維傾斜數據，要素將與之對齊。若要素具有 z 值，則忽略 z 值 absolute height：絕對高程，海平面以上的絕對高程（z 值）處 relative height：相對地表高度，要素放置在相對于地表或三維傾斜數據的某一高程處 relative to scene：要素相對于場景圖層的高度，（3D Object、傾斜攝影、拉伸圖層、Building）點要素數據、線要素數據和面要素數據

7、2維數據3維可視化 2D和3D通用Location onlyUnique(typed)valuesClass breaksContinuous color/sizeMultivariateRenderersLocationUnique typesClass breaksC C/Z and MV點要素數據、線要素數據和面要素數據2維數據3維可視化 2D Symbols simple-marker picture-marker simple-line simple-fill 3D SymbolsPointSymbol3D（3D點）LineSymbol3D（3D線）PolygonSymbol3D（3

8、D面）MeshSymbol3D（3D網格）LabelSymbol3D（任何幾何類型）Symbols點要素數據三維符號（PointSymbol3D：Icon/Object）2維數據3維可視化ObjectSymbol3DLayer有有體積的體積的3D 形狀形狀（如球體（如球體或圓柱體或圓柱體）IconSymbol3DLayer平面平面 2D 圖標圖標（如（如圓形圓形）TextSymbol3DLayer繪制繪制文本文本標簽標簽點要素數據三維符號（WebStyleSymbol）2維數據3維可視化三維城市點要素Symbol，在JSAPI內部它會默認轉換為PointSymbol3D來加載和渲染平臺接口內置

9、Web樣式近400種通過styleName或者styleUrl來引用點要素數據三維符號2維數據3維可視化WebStyleSymbol擴展glTF（GL Transmission Format），即圖形語言交換格式，它是一種3D內容的格式標準通過引用發布好的三維模型數據(.gltf/.glb)，在SceneView中加載外部模型，進行符號化線要素數據三維符號（LineSymbol3D：Line/Path）2維數據3維可視化LineSymbol3DLayer平面 2D 線PathSymbol3DLayer通過沿線拉伸 2D 輪廓，渲染折線幾何圖形2維數據3維可視化面要素數據三維符號(Polygon

10、Symbol3D：Fill/Water/Extrude)(Line/Icon/Object/Text)FillSymbol3DLayer渲染平面 2D多邊形幾何體和 3D 有體積的網格的表面ExtrudeSymbol3DLayer從地面向上拉伸多邊形，創建3D體積對象WaterSymbol3DLayer將多邊形幾何體渲染為逼真的動畫水面目錄 3D 可視化概述 GeoScene 3D Web 開發介紹 GeoScene 3D Web 新特性 GeoScene 3D Web 開發實踐GeoScene 3D 新功能新增具有建筑物和樹木要素3D可視化效果的OpenStreetMap(OSM)圖層增強雨

11、雪天氣3D可視化效果除了更改云覆蓋范圍外，還可調整降水量或將 3D 數據覆蓋在雪中增加數據服務的可視化形式可將屬性變量可視化為曲面或體積，新的體素體積樣式（VoxelVolumeStyle）類可夸大和偏移渲染的要素，以更好地了解數據的空間特征GeoScene 3D 新功能增強工具和標簽提示標簽指示多邊形和折線段的長度，工具提示顯示幾何形狀和工具信息（線總長或多邊形的面積，以及旋轉、比例和距離等）。增加3D混合模式可以使用2D中已有的混合模式，來組合場景中的多個圖層，實現更為美觀的地面可視化效果。如在OSM 底圖上混合山體陰影，使其具有更強的對比度和空間效果。增強日光小部件功能可通過直接在日光小

12、部件中更改照明類型，來增強3D效果可不使用真實的太陽位置，通過相機位置定位光源，最大限度地減少陰影，從而均勻地照亮3維場景。目錄 3D 可視化概述 GeoScene 3D Web 開發介紹 GeoScene 3D Web 新特性 GeoScene 3D Web 開發實踐“tianditu-topography”demo1使用高程圖層和一個底圖圖層底圖圖層疊加在高程圖層上，創建 3D 視圖3.創建場景視圖2.創建一個Map并添加一個高程圖層（groud屬性）和一個底圖圖層（basemap屬性）4.設置相機位置信息顯示其他數據，可以添加數據層或者圖形，并使用 2D 或 3D 符號渲染要素geosc

13、ene/Mapgeoscene/views/SceneView1.引用所需類demo2使用三維傾斜數據，創建 3D 視圖1.引用相關類2.創建Map3.創建三維傾斜數據圖層并添加至map中4.創建視圖geoscene/WebScenegeoscene/views/SceneViewgeoscene/layers/IntegratedMeshLayergeoscene/widgets/LayerListgeoscene/widgets/Legend5.添加圖例demo3簡單建筑物的三維可視化geoscene/Mapgeoscene/views/SceneViewgeoscene/layers/SceneLayergeoscene/layers/FeatureLayer2.創建SceneLayer3.數據服務地址5.指定可視化符號symbol type屬性 MeshSymbol3DsymbolLayers屬性類型（FillSymbol3DLayer）、材質和邊緣等屬性4.設置圖層的渲染方式6.創建Map7.創建SceneView1.引用相關類