李魏-使用GeoScene Api for Javascript 構建強大高性能的三維應用.pptx

《李魏-使用GeoScene Api for Javascript 構建強大高性能的三維應用.pptx》由會員分享，可在線閱讀，更多相關《李魏-使用GeoScene Api for Javascript 構建強大高性能的三維應用.pptx（31頁珍藏版）》請在三個皮匠報告上搜索。

1、使用GeoScene API for Javascript構建強大高性能的三維應用專業服務事業部 李魏項目中引入JS API方式有兩種：AMD：異步加載，無需打包，項目運行時在html中掛載script標簽，直請求取部署在服務器上的API。對比ESM較為簡單，可快速開始開發，目前推薦demo級或者輕量的應用開發使用。(向前兼容4.X API的老項目)ESM：通過npm下載依賴到本地，接入webpack等打包工具，引入編譯、壓縮、TreeShaking和單元測試等功能，享受更豐富現代的JS或 TS語法支持，適合規模更大，更復雜的應用開發場景。GeoScene Api for Javascript

2、 引入方式大部分JS API中提供的類都是訪問器核心類的子類。Accessor中主要有 get（訪問）、set（設置）和watch（監聽）方法，提供一種讀寫和監聽實例屬性的機制，給開發者帶來了一致、簡潔、高效的開發體驗。核心原理是通過Object.defineProperty，劫持數據的訪問和設置。訪問屬性方法 get，支持安全訪問嵌套屬性（類似于es2020中的optional chaining）：const basemapTitle=map.get(basemap.title);設置屬性方法 set，支持多個屬性值的批量設置：const newViewProperties=center:-

3、100,40,zoom:6;view.set(newViewProperties);監聽屬性值變動方法watch，觀察者設計模式，提供了響應式功能，高效更新修改部分數據對應的UI：const handle=view.watch(scale,(newValue,oldValue,property,object)=console.log(newValue,oldValue,property,object)）此外JS API 還提供了響應式工具 reactiveUtils，提供多種watch,on,once,when,whenOnce等多種監聽工具（監聽邏輯復用）。支持多種數據類型的對象屬性的觀察，

4、也支持合并觀察多個屬性。核心類 Accessor（訪問器）多級緩存策略：除了服務器端CDN緩存和瀏覽器請求緩存的原始三維數據外，JS API會將當前場景處理過的CPU運算友好型3D數據，緩存在瀏覽器IndexedDB中，便于CPU復用。JS API 針對三維場景優化策略i3s數據請求策略：目的是有限時間內加載合適（屏幕中心先于屏幕邊緣，先于屏幕外）的數據。單純使用并行請求，消費全部有限帶寬，會導致渲染場景不急需的數據請求占滿帶寬造成阻塞。JSAPI 將i3s數據請求分為兩類：1.Index Nodes：返回服務數據的位置，包含許多子請求。2.Geometry Data：場景中渲染需要的數據，請

5、求數量少，但內容非常大。JS API針對這兩種請求場景結合加載優先策略動態進行請求參數調整。漸進式加載（LOD）策略：加載大量三維數據時，先快速展示一個預覽然后加載更精細的數據，優于長時間空白等待詳細數據。JS API中的LOD系統基于屏幕分辨率。首先模擬一個較低的分辨率的屏幕，下載在該分辨率下需顯示的節點，實現圖層的快速概覽。然后請求更精細的數據來優化三維場景顯示。單個圖層內存使用策略：渲染三維圖層時，根據i3s服務提供的模型球體邊界信息，重新計算出更貼合的模型包圍體（計算結果緩存在IndexedDB，使用瀏覽器web worker進行計算工作，不阻塞瀏覽器主線程）?？梢缘玫礁_的LOD加

6、載策略，達到減少渲染數據（減少的內存占用），卻能保持渲染結果的目的。全局內存使用策略：在每次場景內容或攝像機位置發生變化時，都會重新評估內存使用情況，并動態地提高或降低全局細節級別，同時觸發緩存和卸載數據。Draco模型壓縮算法，保證模型精度的前提下，壓縮模型文件大小。JS API 針對三維場景優化策略4.X系列的API所有的異步操作都使用Promise進行了封裝。由于Promise的鏈式調用特性，便于開發者對異步操作進行順序編排。由于layers,maps等都需要依賴服務器數據進行初始化，正常使用實例需要等數據資源加載完畢。JS API引入了loadable設計模式，用于管理資源的加載，同一

7、份資源的多次加載，超時，重試，服務響應緩慢情況下取消加載資源的場景。loadable 提供監聽對象初始化狀態，如下代碼所示，級聯依賴加載的場景。JS API異步基于JS API的web三維應用 基礎元素LayersMapSceneViewCamera數據層展示層三維數據生產消費流程城市建模引擎軟件GeoScene Pro 桌面端桌面端無人機數據處理軟件GeoScene云平臺云平臺移動端三維web應用PC端三維web應用新JS API MVVM架構下，數據層和視圖層是完全分離的:Map作為一個數據層的容器，負責數據管理，更詳細一點管理所有的圖層。被管理的圖層實例可以被分為三大類：Basermap

8、 底圖Ground 負責顯示地形和高程信息layers 具體業務圖層TIPS1：其中 Basemap和Ground這兩種圖層實例的初始化，JS API提供了Well-Known ID配置方法。TIPS2：當Basemap中切片的分辨率和當前view的縮放對應不好，導致底圖顯示模糊時，可以使用tileInfo自定義lods，加載合適分辨率的切片。TIPS3：Map中的圖層和配置可以在應用運行時通過代碼組織。也可以使用提前在geoscene portal 中組織好的Web Map 和 Web Scene，傳入id即可。Maps View主要作用是渲染圖層、圖層彈窗和微件，處理用戶交互。在三維應用中

9、，使用基于瀏覽器 WebGL技術的SceneView,來渲染 3D 視圖。SceneView 支持兩種的查看模式（支持不同的坐標系統）。global模式將地球渲染為球體，只支持WebMercator(3857)，WGS84(4326)，CGCS2000等有限的坐標系local模式將要素渲染在平面上，允許在局部或裁剪區域展示要素。支持WebMercator（3857）和任意投影坐標系Tips：在兩種查看模式下，開發者都可以將 Ground.navigationConstraint.type 設置為 none 來允許攝像機低于地面。在開發需要展示地下管道的應用時非常有效。localglobalVi

10、ewsview支持的事件可以分為以下幾種：鼠標事件：click，double-click，drag，hold，immediate-click，immediate-double-click，pointer-down，mouse-wheel，pointer-leave，pointer-move，pointer-up鍵盤事件：key-down，key-upview變化事件：focus，blur，layerview-create，layerview-create-error，layerview-destroy，resizeViews Events三維場景中鼠標事件的回調中配合使用SceneView.h

11、itTest方法，可以獲取當前場景中被選中的對象。如下圖所示，hittest會從觀察點和目標連接一條線，將中間所有交叉的對象以數組的形式返回。點擊事件回調中配合使用view.toMap獲取場景內坐標。Layers 和 data圖層是可在map中使用的數據集合，JS API支持多種類型的圖層（多種類型的數據源）構建一個三維應用可以使用的數據:二維數據要素數據 Features(動態數據會自動投射到當前坐標系)Maps切片數據 Tiles高程數據 Elevation三維數據 (符合開源的i3s標準 OGC Indexed 3D Scene Layer)。sceneLayerbuildingLaye

12、rIntegratedMeshLayerPointCloudLayer適合手工精細建模數據，如3ds Max生產出來的數據無人機傾斜攝影數據激光雷達獲取的點云數據BIM數據支持renderer支持popup支持querying不支持標簽支持renderer支持popup支持querying不支持標簽支持renderer不支持popup不支持querying不支持標簽支持部分（不）展示支持壓平不支持renderer不支持popup不支持querying不支持標簽Camera 與 view.goTo最簡三維應用二三維聯動 使用2D數據實現三維效果根據建筑底面(polygon features)和真

13、實高度擠出(Extrude)白模,其中多邊形數據來自于feature layer根據樹的點位(point features)放置WebStyleSymbol并根據圖層中的真實數據設置Symbol的寬高,和顏色，其中點位數據來自于feature layer使用2D數據實現三維效果3d標簽(label-3d)與標注線結合使用標注山峰高度,標簽數據來自于feature layer更改要素圖層的高程信息(elevationInfo 屬性)以進行 3D 可視化,自定義 3D 場景中要素的高程。Renderer 定義了圖層將如何將會如何繪制，下面為開發常用的幾種renderSimpleRenderer：使

14、用同一個Symbol渲染圖層中的所有要素。UniqueValueRenderer：根據一個或多個相等的屬性值對圖層中的要素進行符號化，被匹配到的要素會有不同顏色、填充樣式或圖像。ClassBreaksRenderer：根據指定內容為數值的屬性的值，是否處在一定范圍來定義圖層中要素的符號化結果圖層渲染器Renderer圖層查詢和展示功能區域建筑年代用途統計:繪制geomety緩沖區，使用緩沖區對場景中的建筑圖層進行查詢。查詢得到的一個要素數組，在要素attribute字段中可以得到右側統計圖表中需要的統計數據。此處的統計結果可以自定義使用三方圖表庫進行渲染。Tips：查詢操作可以是JSAPI基于

15、WebAssembly技術的客戶端查詢。查詢操作分為屬性查詢和框選查詢兩種。道路紅線碰撞檢測:繪制道路紅線緩沖區，使用紅線緩沖區對場景中的建筑圖層進行查詢。查詢得到要素數組，根據要素id數組設置圖層的renderer為UniqueValueRenderer。微件可以快速給場景添加功能的UI，JS API提供了很多開箱即用的微件。例如使用微件在web端進行三維分析：開箱即用的微件開箱即用的微件開箱即用的微件天氣微件微件的UI與其狀態和核心邏輯是分開的。微件的狀態數據和方法在其 viewModel 屬性中進行定義和處理。由于viewModel 類都從 Accessor擴展而來，因此viewMode

16、l 上的所有屬性都是響應式的，可以訂閱值是否被修改。這種UI和核心邏輯的分離的設計，允許開發人員快速復用微件中的核心邏輯，使用任意前端框架渲染屬性數據并動態更新。Tips：使用css變量 支持實時修改主題顏色Tips：在所有的微件中，繪制微件的核SketchViewModel使用較為頻繁。開箱即用的微件widgetViewModelWeb Components基于SketchViewModel三維路徑繪制 道路管道墻壁通風管道瀏覽器端三維繪制能力webgl擴展渲染能力 externalRenderersexternalRenderers提供了一個底層接口來訪問 SceneView 的 WebGL 上下文，因此可以實現與場景交互方式一致的，自定義可視化效果?，F有圖層無法滿足渲染需求，或者特殊的動畫效果，同時對WebGL比較熟悉