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。

输入图片说明