Not able to change time range in viewer

[devinnoth]

Help Wanted:

I've been looking for a way to change the clock in the viewer with no luck. I can't seem to find any notes in the documentation on how to go about doing this.

What I'm mainly looking to do is initialize the viewer created by calling <ac-map></ac-map> with a custom clock, that has a specific startTime and stopTime, defined in this documentation... https://cesiumjs.org/Cesium/Build/Documentation/Clock.html

...and has the the clockRange option set to, LOOP_STOP, as defined in the following documentation https://cesiumjs.org/Cesium/Build/Documentation/ClockRange.html

If it isn't possible to initialize the viewer with my own clock, is there a way I can change the options of the clock created through <ac-map></ac-map>?

If not this, any other recommendations on how to go about this?

For context, I'm creating an app displaying satellite orbit data, and want the user to be able to select a specific date to show the orbit path of the satellite for that date. My issue is I can't seem to change the date in the viewer, or have the viewer loop around a specific time range.

Thank you in advance for your help

Version

• angular-cesium@0.0.56

[eitanfr]

Hi, yes, check out the ViewerConfigurationService, there is an example in the demo

[nate-h]

Link returns 404

[nate-h]

I set time range using roughly the following code:

constructor(
    private viewerConf: ViewerConfiguration
  ) {

    // Load metadata.
    this.locationMetadata = some_json_file as LocationMetadata;

    const clock = new Cesium.Clock({
      startTime: Cesium.JulianDate.fromIso8601(this.locationMetadata.time.min),
      currentTime: Cesium.JulianDate.fromIso8601(this.locationMetadata.time.min),
      stopTime: Cesium.JulianDate.fromIso8601(this.locationMetadata.time.max),
      clockRange: Cesium.ClockRange.LOOP_STOP, // loop when we hit the end time
      clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
      multiplier: 1, // how much time to advance each tick
      shouldAnimate: true, // Animation on by default
    });

    const clockViewModel = new Cesium.ClockViewModel(clock);

    // Declare viewer options.
    this.viewerConf.viewerOptions = {
      selectionIndicator: true,
      timeline: true,
      infoBox: false,
      fullscreenButton: true,
      baseLayerPicker: true,
      animation: true,
      shouldAnimate: true,
      homeButton: false,
      geocoder: false,
      navigationHelpButton: false,
      navigationInstructionsInitiallyVisible: false,
      scene3DOnly: true,
      clockViewModel
    };
  }

[nate-h]

I believe this issue can be closed now with the last comment I posted.

[scottazord]

@nate-h The example doesn't work for me. My 'startTime' and 'stopTime' is later populated by the CZML header.

       const clock = new Cesium.Clock({
            clockStep: Cesium.ClockStep.TICK_DEPENDENT,
            clockRange : Cesium.ClockRange.CLAMPED,
        });

        const clockViewModel = new Cesium.ClockViewModel(clock);

        this.viewerConf.viewerOptions = {
            sceneMode: Cesium.SceneMode.SCENE2D,
            selectionIndicator: false,
            timeline: true,
            infoBox: false,
            fullscreenButton: false,
            baseLayerPicker: false,
            animation: true,
            homeButton: false,
            geocoder: false,
            requestRenderMode: true,
            maximumRenderTimeChange : 1.0,
            navigationHelpButton: false,
            navigationInstructionsInitiallyVisible: false,
            clockViewModel
        };
    }

[nate-h]

@scottazord I'm fairly new to AC so I can't help out much. Be sure you defined that code in the constructor and not in any other function like ngOnInit. And I'm not sure why you're mentioning the CZML header. If it's overriding the time, then that seems as expected?

[nate-h]

@scottazord fyi, I had luck changing the clock dynamically by just messing with the clock object. Like: this.viewer.clockViewModel.currentTime = Cesium.JulianDate.fromIso8601('2020-10-05T15:10:00');