Cesium的擴(kuò)展工具包-EarthSDK使用指南1
前言
Cesium作為三維GIS和BIM應(yīng)用的主力引擎,目前已經(jīng)受到越來(lái)越多的開(kāi)發(fā)者的青睞磷杏。這兩年筆者也一直做Cesium相關(guān)的開(kāi)發(fā)工作,真切地感受到Cesium的強(qiáng)大溜哮,其豐富的API锣笨、豐富的示例為開(kāi)發(fā)三維GIS/BIM應(yīng)用提供了極大的便利判哥。
為了進(jìn)一步豐富Cesium的開(kāi)發(fā)生態(tài)良蒸,我們把之前在Cesium基礎(chǔ)上開(kāi)發(fā)的功能,以及大量的改良功能茅撞,封裝成若干個(gè)獨(dú)立的js包。這樣也避免開(kāi)發(fā)者重復(fù)造輪子典尾。對(duì)于大屏展示匠抗、C端替代等直接本地部署Cesium的應(yīng)用場(chǎng)景多柑,可以直接免費(fèi)使用我們封裝的EarthSDK擴(kuò)展包初嘹。
EarthSDK簡(jiǎn)介
EarthSDK和Cesium的關(guān)系
EarthSDK中主要包括XbsjEarth.js和XbsjCesium.js兩個(gè)js包屯烦。
XbsjCesium.js用來(lái)擴(kuò)展Cesium所不具備的三維可視化功能,例如視頻融合芍殖、分析工具窃躲、模型壓平等。
XbsjEarth.js則主要目標(biāo)在于封裝出更加易于使用的API接口,盡可能屏蔽掉前端開(kāi)發(fā)工程師所不熟悉的圖形學(xué)、GIS相關(guān)內(nèi)容搏嗡。會(huì)在Cesium的基礎(chǔ)上封裝好一些復(fù)雜的交互操作拉一,并提供極其簡(jiǎn)單的API接口方便調(diào)用。
EarthSDK提供超級(jí)易用的API
- 響應(yīng)式屬性
EarthSDK從前端開(kāi)發(fā)者的角度考慮設(shè)計(jì)API旧乞,大部分類(lèi)的屬性都是響應(yīng)式設(shè)計(jì)蔚润,通過(guò)簡(jiǎn)單操作即可監(jiān)控相應(yīng)的屬性變化,通過(guò)bind方便可以實(shí)現(xiàn)屬性的相互綁定尺栖。特別針對(duì)Vue的開(kāi)發(fā)者嫡纠,實(shí)現(xiàn)了和vue的響應(yīng)式屬性的無(wú)縫融合。具體可以參考這篇文章的介紹:三維應(yīng)用的響應(yīng)式設(shè)計(jì)探索延赌。
- JSON配置式API
之前使用過(guò)ECharts的同學(xué)可能對(duì)ECharts的操作簡(jiǎn)單印象深刻除盏。ECharts相當(dāng)于把大量的API轉(zhuǎn)成配置式,真正使用時(shí)挫以,只需要通過(guò)setOptions來(lái)進(jìn)行一個(gè)大JSON對(duì)象的配置者蠕,即可完成圖表的創(chuàng)建。
EarthSDK的API設(shè)計(jì)也是受ECharts的啟發(fā)掐松,會(huì)盡量減少不需要的API踱侣,減輕開(kāi)發(fā)者的記憶負(fù)擔(dān)。只需要通過(guò)一個(gè)大JSON配置大磺,就可以完成整個(gè)場(chǎng)景的搭建抡句。
而且,EarthSDK比ECharts更進(jìn)一步量没,可以直接修改相應(yīng)的屬性玉转,即可完成三維場(chǎng)景的動(dòng)態(tài)變化。而ECharts則需要不停地調(diào)用setOption來(lái)進(jìn)行配置殴蹄。以后的文章中會(huì)詳細(xì)說(shuō)明此特性。
EarthSDK并不影響原生Cesium API的調(diào)用
EarthSDK創(chuàng)建場(chǎng)景后猾担,內(nèi)置viewer和scene對(duì)象袭灯,用戶(hù)可以通過(guò)viewer或者scene來(lái)向場(chǎng)景中添加Cesium的原生對(duì)象,和調(diào)用所有原生的Cesium API函數(shù)绑嘹。
樣例程序XbsjEarthUI
為了更易于理解EarthSDK的使用稽荧,我們開(kāi)發(fā)了一個(gè)樣例程序 XbsjEarthUI(這個(gè)程序也同時(shí)集成到了CesiumLab中)。此樣例程序已經(jīng)開(kāi)源放在Github和Gitee上工腋,基于MIT協(xié)議姨丈,用戶(hù)可以任意修改。
XbsjEarthUI在github上的地址: https://github.com/cesiumlab/XbsjEarthUI
XbsjEarthUI在gitee上的地址:
https://gitee.com/cesiumlab/XbsjEarthUI
EarthSDK擴(kuò)展了若干Cesium不具備的功能
影像糾偏
EarthSDK可以加載百度地圖擅腰、高德地圖等三十多種地圖數(shù)據(jù)蟋恬,并可以做到實(shí)時(shí)糾偏。
視頻融合
交通安防領(lǐng)域需要用到的視頻監(jiān)控趁冈、視頻融合功能歼争“萋恚可以將視頻映射到傾斜攝影、BIM模型上(3dtiles模型)沐绒,視頻會(huì)覆蓋到非平面物體上俩莽,不會(huì)出現(xiàn)閃爍等現(xiàn)象。
編輯交互
針對(duì)模型位置乔遮、姿態(tài)進(jìn)行編輯扮超。方便進(jìn)行多個(gè)模型數(shù)據(jù)組合使用。并且這里的模型位置編輯可以很方便的在全球任意位置拖放蹋肮。
建筑群泛光特效
結(jié)合CesiumLab數(shù)據(jù)生產(chǎn)出刷,使用EarthSDK調(diào)整數(shù)據(jù)后期亮度,可以做出較好的特效括尸。方便進(jìn)行大屏展示巷蚪。
多視口方案對(duì)比
可以指定模型數(shù)據(jù)顯示在某一個(gè)視口,方便進(jìn)行方案對(duì)比等操作濒翻。
地下模式和地表透明
Cesium的地面本身不能做到透明顯示屁柏,我們進(jìn)行改進(jìn),使得透明度可以實(shí)時(shí)調(diào)節(jié)有送。
視域分析
動(dòng)態(tài)實(shí)現(xiàn)視域分析效果淌喻。
路徑編輯
可以對(duì)路徑進(jìn)行編輯,編輯好的路徑雀摘,可以用于控制相機(jī)的漫游裸删,也可以控制物體的移動(dòng)。
改進(jìn)的標(biāo)簽
對(duì)原始Cesium的標(biāo)簽效果進(jìn)行改進(jìn)阵赠,并可以使用類(lèi)似html5標(biāo)簽增加onClick屬性涯塔,來(lái)自動(dòng)執(zhí)行自定義操作。