Search code examples
cesiumjs

Cesium sampledProperty for text on labels?


So similar to how you "bake" values with timestamps to the position attribute (or color etc), is it possible to have the label change its text according to the timestamp?


Solution

  • Yes, use TimeIntervalCollectionProperty. Here's an example, click the "Run code snippet" button at the bottom of this code:

    var viewer = new Cesium.Viewer('cesiumContainer', {
        navigationInstructionsInitiallyVisible: false,
        // These next 5 lines are just to avoid the Bing Key error message.
        imageryProvider : Cesium.createTileMapServiceImageryProvider({
            url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
        }),
        baseLayerPicker : false,
        geocoder : false,
        // This next line fixes another Stack Snippet error, you may omit
        // this setting from production code as well.
        infoBox : false
    });
    
    var startTime = Cesium.JulianDate.fromIso8601('2016-08-01T00:00:00Z');
    var intervalStart = startTime;
    
    // Here we construct a TimeIntervalCollectionProperty for the
    // label text that changes over time.
    var labelText = new Cesium.TimeIntervalCollectionProperty();
    
    // As a demo, this creates a day's worth of one-second time intervals, each
    // one with its own label text.
    for (var x = 0; x < 86400; ++x) {
        var intervalStop = Cesium.JulianDate.addSeconds(startTime, x, new Cesium.JulianDate());
        labelText.intervals.addInterval(new Cesium.TimeInterval({
            start: intervalStart,
            stop: intervalStop,
            data: 'Time ' + x
        }));
        intervalStart = intervalStop;
    }
    
    // Set up some clock properties here.
    var clock = viewer.clock;
    clock.startTime = startTime;
    clock.stopTime = intervalStart;
    clock.currentTime = startTime;
    clock.clockRange = Cesium.ClockRange.CLAMPED;
    clock.multiplier = 30;
    viewer.timeline.zoomTo(clock.startTime, clock.stopTime);
    
    // Finally, create and add an entity with a label, using the labelText
    // collection above from the TimeIntervalCollectionProperty we constructed.
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
        label : {
            text : labelText
        }
    });
    html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      font-family: sans-serif;
    }
    <link href="http://cesiumjs.org/releases/1.29/Build/Cesium/Widgets/widgets.css" 
          rel="stylesheet"/>
    <script src="http://cesiumjs.org/releases/1.29/Build/Cesium/Cesium.js">
    </script>
    <div id="cesiumContainer"></div>