javascript - 铯 - 移动广告牌

Question

我正在测试 Cesiumjs 以查看它是否可以反射(reflect)近乎实时的体验 - 例如:飞机的位置。

为此，我需要绘制广告牌并让它们移动 - 我知道用铯可以做到这一点，只是不确定如何实现。

代码如下所示:

var billboards = scene.primitives.add(new Cesium.BillboardCollection());
var billboard = {
    image : '/path/to/logo.png',
    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)
};
billboards.add(billboard);

我的问题是如何更改广告牌的位置。我找不到可以解释的 ant 文档。

我想这样做:

billboard.position = ... //new position

但是cesium怎么知道我已经改变了位置属性，除非它以某种方式将该引用变成一个可观察的对象。

那么我该如何更新位置呢？

谢谢。

Answer 1

Cesium 确实会监听 billboard.position 的变化( source code here )，因此应用仅写入新位置是正确的行为。

请注意，您必须一次写入整个位置，这意味着您可以不写入billboard.position.x。相反，保留一个“scratch”Cartesian3(不要在 60fps 的每个动画帧中创建一个 new)，写入你的 scratch 的 x,y,z 属性变量，然后将您的 scratch 变量分配给 billboard.position。您可以在源代码中看到分配的值将被克隆到另一个预先存在的 Cartesian3 中，因此您可以立即重用临时变量。

这是一个例子:

// Just once at app startup.  Don't call "new" at 60fps.
var scratchCartesian3 = new Cesium.Cartesian3();

var ellipsoid = viewer.scene.mapProjection.ellipsoid;

function onTick() {
    // This is safe to call at 60fps.
    billboard.position = Cesium.Cartesian3.fromDegrees(
        lon, lat, alt, ellipsoid, scratchCartesian3);
}

另请注意，您的问题和上述答案都集中在 Cesium API 的“Graphics Primitive”层上。 Cesium 有一个更高的层，称为“Entity”API，如果您希望 Cesium 处理带有弹出描述等的用户可选对象的概念，您可以使用它。这是一个Sandcastle demo。显示如何将广告牌添加为实体的属性，而不是作为基元。这允许您向同一实体添加其他属性，例如名称、描述、标签、3D 模型等，并让它们都从同一位置属性控制，并让 Cesium 处理弹出描述。实体的位置属性比基元更复杂，例如它可以是 constant或 sampled .这允许实体在显示时间线时随时间改变位置。