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

 
输入图片说明




原文地址:https://www.cnblogs.com/cesium1/p/10062933.html