Cesium 1.51新功能評測

前言

之前介紹Cesium1.50版本的新功能時，很多人把1.50寫成1.5。這兩個版本可不一樣，之間差了45個小版本號，1.5版本大概是Cesium三年前的版本了。

Cesium每月月初的第一個工作日出版本，這個節奏已經維持四年多了。。一直沒有變化。所以小版本號一直很多，也不知道Cesium什么時候能出2.x的版本，希望屆時能換個打包編譯工具，也能支持一下tree-shaking。。Cesium目前編譯壓縮以后的版本快接近3M了，這個需求很迫切啊。。

這個月的Cesium 1.51版本，沒有太多新功能，不過對上一個版本繼續做了很多改進。下面再詳細說明一下。

功能評測

Imagery Cutout(影像圖層上挖洞)

ImageryLayer類增加了cutoutRectangle屬性

 

輸入圖片說明

 

輸入圖片說明

WMS-T(time)

WebMapServiceImageryProvider新增根據時間進行動態調整影像的功能,實際上這個功能一年前已經在WMTS上支持了，Sandcastle中也有一個相關的示例。

 

輸入圖片說明

不過此次對WMS的完善，貌似還沒有示例，或許以后會增加上吧。。

Atmosphere改進

Cesium在1.50版本上增加了Ground Atmosphere，這樣就出現Ground Atmosphere和Sky Atmosphere兩個渲染效果。1.51版本更正了Sandcastle中的示例名稱，把Atmosphere改稱Ground Atmosphere，Atmosphere Color改成Sky Atmosphere，這樣更利於讀者理解。如下圖所示。

 

輸入圖片說明

Globe類上新增以下屬性：atmosphereHueShift, atmosphereSaturationShift, and atmosphereBrightnessShift。這樣Sky Atmosphere上的調整，也可以通過這幾個變量，來同步修改Ground Atmosphere。

 

輸入圖片說明

削減release版js文件大小

Cesium的第三方庫中有一個叫google-earth-dbroot-parser.js的文件，是為了加載谷歌地球服務需要用到的一個js文件。這個js文件居然有驚人的400個多k，而且Cesium還直接打包到最終的release版js文件當中。

 

輸入圖片說明

然而如果不使用谷歌地球服務的話，根本不需要用到這個文件。所以此次Cesium調整了一下策略，relese時不合並這個文件，而是在需要時再自動加載。

經過此番操作，最終gzip之后的Cesium.js文件會減少27 KB (~3.7%)。削減量貌似也不是很大。。如果Cesium以后能改成按需加載，別打包成一個整的js文件，或許會好很多。

imageBasedLightingFactor

Cesium3DTileset, Model, and ModelGraphics類型增加了imageBasedLightingFactor屬性，這個變量是Cartesian2類型，分別表示環境因素（大氣、星空等）導致的散射光和鏡面光系數。需要注意的是數值必須在0-1之間。它的作用可以看下對比圖。

正常情況下的車輛是這樣的：

 

輸入圖片說明

imageBasedLightingFactor設置成(0, 0)時，相當於去掉環境光的影響，效果是這樣的：

 

輸入圖片說明

另外還增加了lightColor屬性（Cartesian3類型），用來調整太陽光的顏色和強度。因為可以調整強度，所以數值可以超過1。我把lightColor改成(10, 10, 0)以后的效果如下：

 

輸入圖片說明

注意點：imageBasedLightingFactor和lightColor屬性，都只能在PBR材質上使用，如果某個模型並非PBR材質，這兩個屬性即使設置了也不起作用。

BIM示例改進

Cesium自帶的BIM示例之前有一些面片閃爍的問題，目前已修復。還增加了一個Per-feature slection的選項，用來對BIM部件進行拾取。Cesium在這里提供了一種不使用style進行拾取樣式設置的方法。

 

輸入圖片說明

該方法主要是通過監聽tileLoad和tileUnload事件，來動態管理feature和部件的關系。通過拾取到的feature，來找到對應的部件，然后再找到該部件關聯的所有feature進行變色。

tileset.tileLoad.addEventListener(function(tile) { processTileFeatures(tile, loadFeature); }); tileset.tileUnload.addEventListener(function(tile) { processTileFeatures(tile, unloadFeature); }); 

矩陣中提取歐拉角

Cesium新增Transforms.fixedFrameToHeadingPitchRoll方法，可以用來提取矩陣中的歐拉角。示例代碼如下：

        var expected = new HeadingPitchRoll(0.5, 0.6, 0.7); var transform = Transforms.eastNorthUpToFixedFrame(Cartesian3.fromDegrees(0, 0)); var transform2 = Matrix4.fromTranslationQuaternionRotationScale(new Cartesian3(), Quaternion.fromHeadingPitchRoll(expected), new Cartesian3(1, 1, 1)); transform = Matrix4.multiply(transform, transform2, transform2); var actual = Transforms.fixedFrameToHeadingPitchRoll(transform); expect(actual).toEqualEpsilon(expected, CesiumMath.EPSILON10); 

---

歡迎關注 Cesium實驗室 ，QQ群號：595512567。

 

輸入圖片說明