如何在 Cesium 的 SampledProperty 中定义属性类型

Question

我正在使用 Cesiumjs 创建一个围绕一个区域移动的多边形。

为了展示它的运动，我尝试创建一个sampledPropertyof PolygonHierarchy。每个样本都是Cartesian3 位置的数组（我的多边形在每个时间步的三个端点）。

我需要知道我在 sampledProperty 中使用的 property 的类型，正如 Cesiumjs 网站中提到的那样：Cesiumjs.org/SampledProperty。

但我不知道如何定义它，我在网站上找不到任何关于如何识别属性类型的解释，尤其是当每个样本本身就是一组属性时。

Answer 1

SampledProperty 在这里不起作用，因为它试图在您给它的点之间平滑插值，但它不知道如何插值多边形层次结构。

因此，您可以使用TimeIntervalCollectionProperty。这里的区别在于，这个属性是逐步动画的，而不是插值，所以这个属性不需要知道如何构造控制点之间的中间值。

我做了一个小演示，展示它如何与多边形层次结构一起工作。点击底部的Run Code Snippet，或将JavaScript 复制并粘贴到Sandcastle。

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

// Set up a limited range of time for this demo.
var time = Cesium.JulianDate.fromIso8601('2016-04-08T12:00:00Z');
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.startTime = time;
viewer.clock.currentTime = time;
viewer.clock.stopTime = Cesium.JulianDate.addSeconds(time, 20, new Cesium.JulianDate());
viewer.clock.multiplier = 1;
viewer.timeline.updateFromClock();
viewer.timeline.zoomTo(time, viewer.clock.stopTime);

// Construct a TimeIntervalCollection showing the changes to the hierarchy over time.
var hierarchy = new Cesium.TimeIntervalCollectionProperty();

for (var i = 0; i < 40; ++i) {
    var nextTime = Cesium.JulianDate.addSeconds(time, 0.5, new Cesium.JulianDate());

    // Inside the loop, per iteration we add one window of time for this polygon.
    hierarchy.intervals.addInterval(new Cesium.TimeInterval({
        start: time,
        stop: nextTime,
        isStartIncluded : true,
        isStopIncluded : false,
        data : Cesium.Cartesian3.fromDegreesArrayHeights([-108.0+i/4, 35.0, 100000,
                                                          -100.0+i/4, 35.0, 100000,
                                                          -100.0+i/4, 40.0, 100000,
                                                          -108.0+i/4, 40.0, 100000])
    }));
    
    time = nextTime;
}

// Create the polygon, using the animated hierarchy.
var orangePolygon = viewer.entities.add({
    name : 'Orange polygon with time-varying position',
    polygon : {
        hierarchy : hierarchy,
        extrudedHeight: 0,
        perPositionHeight : true,
        material : Cesium.Color.ORANGE.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.WHITE
    }
});

viewer.zoomTo(viewer.entities);

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif;
}

<link href="http://cesiumjs.org/releases/1.19/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.19/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>