Cesium 1.54评测

重要功能评测

3dtiles数据上画线和贴纹理

3dtiles数据上画线和贴纹理

把线条贴到3dtiles上需要用到两个属性:clampToGround和classificationType。

clampToGround属性用来表示该线段要贴地。1.54版以后贴地中的字同时指代地形和3dtiles数据。

还有一个属性classificationType,则用来描述是否只贴地形(ClassificationType.TERRAIN),或者只贴3dtiles数据(ClassificationType.CESIUM_3D_TILE),或者二者都贴(ClassificationType.BOTH)。默认情况下是二者都贴。

Entity API源码如下:

var polyline2 = viewer.entities.add({
    polyline : {
        positions : positions2,
        clampToGround : true,
        width : 5,
        material : new Cesium.PolylineOutlineMaterialProperty({
            color : Cesium.Color.ORANGE,
            outlineWidth : 2,
            outlineColor : Cesium.Color.BLACK
        })
    }
});

Primitive API源码如下:

// Polyline Glow
scene.groundPrimitives.add(new Cesium.GroundPolylinePrimitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : new Cesium.GroundPolylineGeometry({
            positions : positions,
            width : 10.0
        })
    }),
    appearance : new Cesium.PolylineMaterialAppearance({
        material : Cesium.Material.fromType(Cesium.Material.PolylineGlowType)
    })
}));

Cesium 1.54版本以前,虽然可以做到几何体贴地,但是只能纯色贴入,并不能贴纹理。1.54版本以后,官方终于可以给3dtile数据贴上纹理了。效果如下:

3dtile数据贴上纹理

源码如下:

var entity = viewer.entities.add({
    polygon : {
        hierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromRadiansArray([-1.3194369277314022, 0.6988062530900625, -1.3193955980204217, 0.6988091578771254, -1.3193931220959367, 0.698743632490865, -1.3194358224045408, 0.6987471965556998])),
        material : '../images/Cesium_Logo_Color.jpg'
    }
});

增加对webp图片格式的支持

对webp图片格式的支持

Cesium增加了新的示例模型,路径如下:

/Specs/Data/Models/Box-Textured-Webp/CesiumBoxWebp.gltf

相关测试源码如下:

var viewer = new Cesium.Viewer('cesiumContainer');

var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0);
var entity = viewer.entities.add({
    position : position,
    model : {
        uri : '../../../Specs/Data/Models/Box-Textured-Webp/CesiumBoxWebp.gltf',
        minimumPixelSize : 128,
        maximumScale : 20000
    }
});
viewer.trackedEntity = entity;

新增恒向线(rhumb line)绘制多边形和线段

下图中绿色线条即恒向线。

绿色线条即恒向线

可以观察红色线条和绿色线条的差别:给定的起点和终点相同,但是绘制出来的线条却不一样。其中红色线条描述的是地表最近距离的曲线,而绿色线条则描述的是恒向线,任意位置的延伸方向都是恒定的。图中起点和终点的纬度都是35,所以绿色线条是和35度纬度线是重合的。

源码如下:

var redLine = viewer.entities.add({
    name : 'Red line on terrain',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                        -125, 35]),
        width : 5,
        material : Cesium.Color.RED,
        clampToGround : true
    }
});

var greenRhumbLine = viewer.entities.add({
    name : 'Green rhumb line',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                        -125, 35]),
        width : 5,
        arcType : Cesium.ArcType.RHUMB,
        material : Cesium.Color.GREEN
    }

新增了两个示例

新增了两个示例

Polylines on 3D Tiles示例

Polylines on 3D Tiles示例用来描述将线段贴到3dtiles上,其中3dtiles数据有有两类。一类是倾斜摄影的,另外一类是BIM的。在电厂BIM模型的示例中可以看出,线条是贴在BIM模型的管线上的。

点击查看本地Demo(需要本地编译源码才可使用)

Polylines on 3D Tiles
Polylines on 3D Tiles

从上面的截图可以看出,贴地模式下线条是贴到3dtiles数据上了,不过会从上往下贯穿所有地方,毕竟没有高度上的限制,这样的话,对于BIM数据其实还是有问题的。有些地方并没有管线,但是照样会画上线条。

Polylines on 3D Tiles
Polylines on 3D Tiles

贴地模式使用起来也很简单,只需要用到clampToGround和classificationType属性,另外注意一下,height不要赋值。源码截取如下:

var powerplant = scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(8564),
        show: false
    })
);
var pipes = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([
            -76.36053390920833, 34.949935893493596,
            -76.36055481641581, 34.94993589886988,
            -76.36055477047704, 34.94992280693651
        ]),
        width : 6,
        material : new Cesium.PolylineDashMaterialProperty({
            color : Cesium.Color.YELLOW,
            dashLength: 20.0
        }),
        show: false,
        clampToGround : true,
        classificationType: Cesium.ClassificationType.CESIUM_3D_TILE
    }
});

Time Dynamic Wheels示例

这个示例用来展示轮胎转速随车辆运动速度快慢自动调整。该示例代码则描述如何将position转化为速度,再转化为轮胎转动角度,最后通过nodeTransformations属性作用于Model,从而实现车辆轮胎的转动。

轮胎转速随车辆运动速度快慢自动调整
轮胎转速随车辆运动速度快慢自动调整

源码截取如下,position是一个SamplePositionProperty,通过在不同的时间点上设置不同的运动位置,来创建一个加速运动的车辆。velocityVectorProperty则根据position计算出每个时间点的速度。再由速度计算出轮胎转动的角度。(注:貌似这个地方的角度计算只是近似值,只有numberOfSamples越大时越准确。)

var numberOfSamples = 100;
for (var i = 0; i <= numberOfSamples; ++i) {
    var factor = (i / numberOfSamples);
    var time = Cesium.JulianDate.addSeconds(start, factor * totalSeconds, new Cesium.JulianDate());

    // Lerp using a non-linear factor so that the vehicle accelerates.
    var locationFactor = Math.pow(factor, 2);
    var location = Cesium.Cartesian3.lerp(startPosition, endPosition, locationFactor, new Cesium.Cartesian3());
    position.addSample(time, location);
    // Rotate the wheels based on how fast the vehicle is moving at each timestep.
    velocityVectorProperty.getValue(time, velocityVector);
    var metersPerSecond = Cesium.Cartesian3.magnitude(velocityVector);
    var wheelRadius = 0.52;//in meters.
    var circumference = Math.PI * wheelRadius * 2;
    var rotationsPerSecond = metersPerSecond / circumference;

    wheelAngle += ((Math.PI * 2 * totalSeconds) / numberOfSamples) * rotationsPerSecond;
    wheelAngleProperty.addSample(time, wheelAngle);
}

其他方面

  1. Entity API中的多个图形的classificationType属性的默认值修改成了ClassificationType.BOTH,也就是说,如果贴地,则会同时往地形和3dtiles数据上贴。

  2. ModelAnimation.speedup已删除,需要使用ModelAnimation.multiplier来代替。

  3. Scene.clampToHeight方法增加了width参数,需要留意。

clampToHeight
  1. PolylineGeometry和SimplePolylineGeometry的followSurface属性被替换成arcType,arcType的值可以是ArcType.NONE、ArcType.GEODESIC和ArcType.RHUMB。

  2. 3dtiles性能有所提升(IBL导致)


欢迎关注 Cesium实验室 ,QQ群号:595512567

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,596评论 4 59
  • 以前看电视,看到狗血的剧情,我都会想给编剧寄刀片,我觉得故事离谱的离开现实生活太远,直到这样的故事真的发生在自己身...
    溜溜小阅读 397评论 2 2
  • 这本书是有韩国作家朴范信写的小说《银娇》,也被翻拍成同名的电影,我是先看了电影,然后时隔四年之后再看了中译本的小说...
    転調阅读 3,534评论 0 0
  • 前言:这是我的专辑自然物语的第一篇,自从写了序篇,终于有时间再动动笔了。放假真是好啊!本来还在打代码做项目的 ,不...
    庞贝船长阅读 238评论 0 0
  • 2017-12-25 。。。。。。
    大大无米粿阅读 154评论 0 0