Link imagery layers to the cesium time playback controls

CesiumJS
1

Hi,

Just wondering if it is possible to link different imagery layers to the time scrubber?
E.g. I have 5 imagery layers in cesium ion representing flooding at different levels. Ideally, I’d like to press play on the time playback controls and then it would scrub through these 5 imagery layers, repeatedly.

Is such a thing possible? I can’t seem to find any examples similar to what I’m trying to achieve

image
image639×233 59.9 KB

2

Hi @a.okeefe289 ,
Thanks for your post and being part of the Cesium community.

To confirm my understanding, you have 5 different imagery layers, and you would like to show them in succession one at a time of a period of time, controlled by the timeline scrubber in the viewer. Is that correct?

I am not sure what format you have your data in. If they are for instance 3D Tiles, you could create a Cesium3DTileset Cesium3DTileset - Cesium Documentation for each, and toggle them on off using the show property Cesium3DTileset - Cesium Documentation.

Here is some pseudocode

// Initialize Cesium Viewer
const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: true,
    timeline: true,
});

// Load two tilesets
const tileset1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'path/to/first/tileset',
}));

const tileset2 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'path/to/second/tileset',
}));

// Set initial visibility
tileset1.show = true;
tileset2.show = false;

// Set up the timeline and clock
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2023-01-01T00:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2023-01-01T24:00:00Z");
viewer.clock.currentTime = viewer.clock.startTime;
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // Loop at the end of the timeline
viewer.clock.multiplier = 3600; // Speed up time for testing

// Function to toggle tileset visibility based on time
viewer.clock.onTick.addEventListener(() => {
    const currentTime = viewer.clock.currentTime;

    // Define time ranges for each tileset's visibility
    const startTime1 = Cesium.JulianDate.fromIso8601("2023-01-01T00:00:00Z");
    const endTime1 = Cesium.JulianDate.fromIso8601("2023-01-01T12:00:00Z");

    const startTime2 = Cesium.JulianDate.fromIso8601("2023-01-01T12:00:00Z");
    const endTime2 = Cesium.JulianDate.fromIso8601("2023-01-01T24:00:00Z");

    // Toggle visibility based on current time
    if (Cesium.JulianDate.greaterThanOrEquals(currentTime, startTime1) &&
        Cesium.JulianDate.lessThan(currentTime, endTime1)) {
        tileset1.show = true;
        tileset2.show = false;
    } else if (Cesium.JulianDate.greaterThanOrEquals(currentTime, startTime2) &&
               Cesium.JulianDate.lessThan(currentTime, endTime2)) {
        tileset1.show = false;
        tileset2.show = true;
    }
});

I think this approach best fits your use case. We also have some examples supporting time dynamic data here Cesium Time Animation using CZML – Cesium and here Visualizing Time Dynamic Data – Cesium which may be of interest to you.

Please let us know if this is helpful and if we can be of more assistance.
Best,
Luke

3

@Luke_McKinstry Perfect! That’s exactly what I needed, except I swapped the 3D tilesets out for imagery layers. Thank you