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属性
![](http://upload-images.jianshu.io/upload_images/80648-5f451c9f7a0b47f9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/319/format/webp)
![](http://upload-images.jianshu.io/upload_images/80648-069de75110b1ae15.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/484/format/webp)
WMS-T(time)
WebMapServiceImageryProvider新增根据时间进行动态调整影像的功能,实际上这个功能一年前已经在WMTS上支持了,Sandcastle中也有一个相关的示例。
![](http://upload-images.jianshu.io/upload_images/80648-520c727d43fb7a1f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/339/format/webp)
不过此次对WMS的完善,貌似还没有示例,或许以后会增加上吧。。
Atmosphere改进
Cesium在1.50版本上增加了Ground Atmosphere,这样就出现Ground Atmosphere和Sky Atmosphere两个渲染效果。1.51版本更正了Sandcastle中的示例名称,把Atmosphere改称Ground Atmosphere,Atmosphere Color改成Sky Atmosphere,这样更利于读者理解。如下图所示。
![](http://upload-images.jianshu.io/upload_images/80648-432208d3b2b5a72b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/873/format/webp)
Globe类上新增以下属性:atmosphereHueShift, atmosphereSaturationShift, and atmosphereBrightnessShift。这样Sky Atmosphere上的调整,也可以通过这几个变量,来同步修改Ground Atmosphere。
![](http://upload-images.jianshu.io/upload_images/80648-59c0db67df1b285c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/505/format/webp)
削减release版js文件大小
Cesium的第三方库中有一个叫google-earth-dbroot-parser.js的文件,是为了加载谷歌地球服务需要用到的一个js文件。这个js文件居然有惊人的400个多k,而且Cesium还直接打包到最终的release版js文件当中。
![](http://upload-images.jianshu.io/upload_images/80648-e70881fd9b77604d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/874/format/webp)
然而如果不使用谷歌地球服务的话,根本不需要用到这个文件。所以此次Cesium调整了一下策略,relese时不合并这个文件,而是在需要时再自动加载。
经过此番操作,最终gzip之后的Cesium.js文件会减少27 KB (~3.7%)。削减量貌似也不是很大。。如果Cesium以后能改成按需加载,别打包成一个整的js文件,或许会好很多。
imageBasedLightingFactor
Cesium3DTileset, Model, and ModelGraphics类型增加了imageBasedLightingFactor属性,这个变量是Cartesian2类型,分别表示环境因素(大气、星空等)导致的散射光和镜面光系数。需要注意的是数值必须在0-1之间。它的作用可以看下对比图。
正常情况下的车辆是这样的:
![](http://upload-images.jianshu.io/upload_images/80648-02cab45d98c3e35f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/428/format/webp)
imageBasedLightingFactor设置成(0, 0)时,相当于去掉环境光的影响,效果是这样的:
![](http://upload-images.jianshu.io/upload_images/80648-b747bcb9735ef913.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/439/format/webp)
另外还增加了lightColor属性(Cartesian3类型),用来调整太阳光的颜色和强度。因为可以调整强度,所以数值可以超过1。我把lightColor改成(10, 10, 0)以后的效果如下:
![](http://upload-images.jianshu.io/upload_images/80648-3fe18f79810b0d27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/438/format/webp)
注意点:imageBasedLightingFactor和lightColor属性,都只能在PBR材质上使用,如果某个模型并非PBR材质,这两个属性即使设置了也不起作用。
BIM示例改进
Cesium自带的BIM示例之前有一些面片闪烁的问题,目前已修复。还增加了一个Per-feature slection的选项,用来对BIM部件进行拾取。Cesium在这里提供了一种不使用style进行拾取样式设置的方法。
![](http://upload-images.jianshu.io/upload_images/80648-06332eae9be4cfc6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/617/format/webp)
该方法主要是通过监听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。
![](http://upload-images.jianshu.io/upload_images/80648-f0632062c7e9dc5a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/540/format/webp)