基於SuperMap三維WebGL開發總結一

相關參考https://blog.csdn.net/supermapsupport/article/details/50035835
前言
越來越多的GIS系統都用到了三維數據,通過GIS和三維模型結合更加直觀的瞭解事物的空間關係,有助於對事物場景進行分析和展示,傳統的三維展示都是需要一些三維插件來查看,非常不方便,插件佔用空間很大本身就會對瀏覽器效率造成很大影響,因此,隨着前端技術的發展,一款牛逼的web圖形庫webgl應運而生,能夠讓我們通過js去使用GPU進行瀏覽器圖形渲染。
SuperMap的三維免插件開發使用的是WebGL,9D及以上版本支持較好。今天我們從0開始一起探討學習開發流程,中間也會寫出自己在開發中遇到的一些坑,以及技術支持幫助的一些解決方案。
本次開發的案例是在影像圖圖層下創建地下管線,主要功能有管線數據處理、影像圖層加載、透明度設置、開挖設置、前端展示、屬性查詢這幾個常用功能。
數據準備
一、管線數據處理
使用的數據是超圖管網提供的管線數據,我需要的數據是將管線埋藏到地下,因此需要對數據進行相關處理,包括將他的節點、管線網絡、爆管點等設置到同一個水平點進行展示,主要步驟如下:
1、設置模型的高度,即管線的Z軸高度
找到管點數據集,他是在三維網絡數據集下面的一個三維點數據集,如下圖
在這裏插入圖片描述
將三維點數據通過數據—類型轉化-將三維點轉化爲二維點
在這裏插入圖片描述
接下來瀏覽新生成的二維點數據集,列中多出一個z字段,選擇更新該列的數值,如果在地下改爲負值即可,在這裏插入圖片描述
接下來將修改後的二維點數據集進行三維轉換,轉換方式通過數據—類型轉化-將二維點轉化爲三維點
2、交通分析
由於管線是由管點通過連線而成,需要構建三維網絡,如下圖
在這裏插入圖片描述
進行構建三維網絡,設置網絡參數
在這裏插入圖片描述
保存以後會生成一個三維網絡數據集,他是一個有上下級的數據集,三維網絡和三維點構成的數據集
如下圖在這裏插入圖片描述
3、將網絡數據集添加到球面
在這裏插入圖片描述
4、設置爆管點
在地下管線中有的管點爆裂,需要進行爆裂展示,具體操作,空間分析—網絡分析—爆管點分析(其他應該類似),
在這裏插入圖片描述
選擇合適的位置放置爆管點位置
在這裏插入圖片描述
右鍵,選擇右側 爆管點,導出數據集,生成三維點數據,如果爆管點的空間位置和網絡數據不在一個空間位置的話可以通過三維點轉換成二維點進行空間信息修改,修改完成以後再轉回三維點即可。
在這裏插入圖片描述
5、生成場景緩存
選擇場景,右鍵生成場景緩存
在這裏插入圖片描述
緩存類型選擇三維切片,文件類型爲s3m格式。
注:爆管點的圖標可以通過圖層風格進行定義,選擇圖標文件進行自定義圖標上傳,如下圖
在這裏插入圖片描述
二、數據發佈
拷貝生成的緩存數據和工作空間及數據源到服務器,通過Iserver進行服務發佈,發佈時選擇三維服務,如果需要數據編輯,可以選擇數據服務,發佈即可,發佈完成以後通過Iserver自帶瀏覽功能進行瀏覽展示。

三、web開發

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章