How to define property type in SampledProperty in Cesium

I am using Cesiumjs to create a polygon which is moving around an area.

To show its movement I tried to create a sampledPropertyof PolygonHierarchy. Each sample is an array of Cartesian3 positions (three endpoints of my polygon at each time step).

I need to know the type of the property that I am using in sampledProperty as it is mentioned in Cesiumjs website: Cesiumjs.org/SampledProperty.

But I don't know how to define it and I couldn't find any explanation on the website on how to identify property type especially when each sample by itself is an array of properties.

Solution

The SampledProperty doesn't work here, since it attempts to interpolate smoothly between the points you've given it, and it doesn't know how to interpolate a polygon hierarchy.

So instead, you can use a TimeIntervalCollectionProperty. The difference here is that this property animates by steps, not interpolation, so the property does not need to know how to construct the intermediate values between control points.

I made a small demo, to show how this works with a polygon hierarchy. Click Run Code Snippet at the bottom, or copy-and-paste just the JavaScript into 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>