cesiumjs - 铯中动态形状的最佳且性能最高的实现

Question

我目前正在开发一个使用 Cesium Viewer 的应用程序。我需要能够显示将动态更新的形状集合。我无法理解执行此操作的最佳方法。

我目前正在使用实体并使用 CallbackProperties 来更新形状。

你可以通过这个沙堡来了解我是如何做到这一点的。有一个多边形对象被用作 cesiumCallback 的基础，并且它正在由另一段代码进行编辑。 (用setTimeout模拟)

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

var polygon = {};
polygon.coordinates = [
    {longitude: 0, latitude: 0, altitude: 0},
    {longitude: 10, latitude: 10, altitude: 0},
    {longitude: 10, latitude: 0, altitude: 0}
];


// converts generic style options to cesium one (aka color -> material)
var polOpts = {};

 // function for getting location
polOpts.hierarchy = new Cesium.CallbackProperty(function() {
  var hierarchy = [];
  for (var i = 0; i < polygon.coordinates.length; i++) {
       var coordinate = polygon.coordinates[i];
       hierarchy.push(Cesium.Cartesian3.fromDegrees(coordinate.longitude, coordinate.latitude, coordinate.altitude));
  }
  return hierarchy;
}, false);

viewer.entities.add({polygon: polOpts});

setInterval(function(polygon){
       polygon.coordinates[0].longitude--;
}.bind(this, polygon), 1000);

传入的多边形是一个一般描述多边形的类，因此它有一个坐标和样式选项数组，以及一个调用此方法的渲染方法 renderPolygon 传入其本身。这种渲染形状的方法适用于我需要的一切，但性能不是很好。形状更新有两种情况，一种形状会在很长一段时间内更新，更新速度很慢，比如每隔几秒更新一次。另一种形状将在几秒钟内更新多次，例如数千次，然后很长一段时间不会再次更改(如果有的话)。

对于如何解决这个问题，我有两个想法。

想法1:有两个方法，一个 renderDynamicPolygon 和一个 renderStaticPolygon。renderDynamicPolygon 方法将使用 cesiumCallbackProperties 执行上述功能。这将用于在短时间内更新多次的形状。更新完成后，renderStaticPolygon 方法将使用常量值替换使用callbackProperties 的实体属性。

这会产生大量其他工作来确保形状处于正确状态，并且对长期缓慢更新的形状没有帮助。

想法2:与基元的工作方式类似，我尝试删除旧实体，并在每次需要更新时再次添加其更新的属性，但这会导致闪烁，并且与基元不同，我找不到实体的异步属性。

我也尝试过使用原语。它对于折线非常有效，我只需删除旧的折线并添加具有更新属性的新折线即可。我还使用 async = false 来确保没有闪烁。我在这里遇到的问题是并非所有形状都可以使用基元创建。 (这是真的吗？)

我尝试的另一件事是使用几何实例，使用几何和外观。在浏览完 cesium 网站上的教程后，我能够渲染一些形状，并可以更新外观，但发现几乎不可能弄清楚如何正确更新形状，并且也很难让它们看起来正确。形状需要具有正确的形状、填充颜色和不透明度以及描边颜色、不透明度和粗细。我尝试使用 PolygonOutlineGeometry，但没有成功。

实现这一点的最佳方法是什么？这些选项之一是否朝着正确的方向发展，或者还有其他我尚未发现的方法吗？

<小时/>

[编辑]我添加了我得到的答案，但仍然不完整并正在寻找答案。

Answer 1

我已经想出了一个很好的解决方案，但仍然有一个小问题。

我也做了一些显示实体的方法。我正在调用一种渲染和一种绘制。渲染使用 Cesium.CallbackProperty 和 isConstant 属性 true，并使用 isConstantProperty false 进行绘制.

然后我创建了一个函数来将实体从渲染更改为绘制，反之亦然。它遍历实体回调属性，并使用 setCallback 属性用正确的函数和 isConstant 值覆盖该属性。

示例:我根据定义的圆形对象创建了一个椭圆。

// isConst is True if it is being "painted" and false if it is being "rendered"
ellipse: lenz.util.extend(this._getStyleOptions(circle), {
  semiMinorAxis: new Cesium.CallbackProperty(
    this._getRadius.bind(this, circle),
    isConst
  ),
  semiMajorAxis: new Cesium.CallbackProperty(
    this._getRadius.bind(this, circle),
    isConst
  ),
})

因此，当更新形状时(当用户绘制形状时)，形状将在 isConstant 为 false 的情况下呈现。然后，当绘图完成时，使用如下代码将其转换为绘制版本:

existingEntity.ellipse.semiMinorAxis.setCallback(
  this._getRadius.bind(this, circle),
  isConst
);
                            existingEntity.ellipse.semiMajorAxis.setCallback(
  this._getRadius.bind(this, circle, 1),
  isConst
);

这在性能方面非常有效。我能够绘制数百种形状，而框架根本不会下降太多。我附上了更改前后包含 612 个实体的 cesium 贴图的屏幕截图，使用 chrome 渲染工具时的帧速率位于右上角。

之前:锁定在 fps 0.9注意:我编辑了用户界面的其余部分，女巫让地球仪看起来被切断了，抱歉

更改后:fps 保持在 59.9，几乎完美!

每当实体从使用常量回调属性“转换”为非常量回调属性时，它和同一类型的所有其他实体都会闪烁然后再次亮起。我找不到更好的方法来进行这种转换。我觉得我一定还缺少一些东西。