How to determine property type in SampledProperty in cesium

Question

I use Cesiumjs to create a polygon that moves around an area.

To show its movement, I tried to create sampledProperty from 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 property that I use in sampledProperty , as mentioned on the Cesiumjs website: Cesiumjs.org/SampledProperty .

But I don’t know how to define it, and I could not find any explanation on the website about how to identify the type of property, especially when each sample in itself is an array of properties.

Answer 1

SampledProperty does not work here because it tries to smoothly interpolate between the points you gave it and does not know how to interpolate the hierarchy of polygons.

So you can use TimeIntervalCollectionProperty . The difference here is that this property is animated in steps, not interpolation, so the property does not need to know how to create intermediate values ​​between control points.

I did a small demonstration to show how this works with a polygonal hierarchy. Click Run Code Snippet at the bottom or copy and paste only 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>