CesiumGS / cesium

An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
https://cesium.com/cesiumjs/
Apache License 2.0
13.04k stars 3.51k forks source link

Regarding the processing of the model after the conclusion of the clock animation #12347

Open zyyyyyy456 opened 2 days ago

zyyyyyy456 commented 2 days ago

Feature

The animation is over, and the model will disappear or loop, but I want to achieve real-time vehicle trajectory playback. The animation playback is not continuous, and there may be delays. Therefore, during the waiting time for data, I want the model to still be displayed on the map. I don't understand why the model needs to disappear when the animation ends.

const timeStepInSeconds = 30; const totalSeconds = timeStepInSeconds * (flightData.length - 1); const start = Cesium.JulianDate.fromIso8601("2020-03-09T23:10:00Z"); const stop = Cesium.JulianDate.fromIso8601("2020-03-09T24:10:10Z"); // Cesium.JulianDate.addSeconds( // start, // totalSeconds, // new Cesium.JulianDate() // ); viewer.clock.startTime = start.clone(); viewer.clock.stopTime = stop.clone(); viewer.clock.currentTime = start.clone(); viewer.timeline.zoomTo(start, stop); // Speed up the playback speed 50x. viewer.clock.multiplier = 1; // Start playing the scene. viewer.clock.shouldAnimate = true; viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // The SampledPositionedProperty stores the position and timestamp for each sample along the radar sample series. const positionProperty = new Cesium.SampledPositionProperty(); for (let i = 0; i < flightData.length; i++) { const dataPoint = flightData[i]; const time = Cesium.JulianDate.fromIso8601(dataPoint.time); const position = Cesium.Cartesian3.fromDegrees( dataPoint.longitude, dataPoint.latitude, dataPoint.height );

      positionProperty.addSample(time, position);
      viewer.entities.add({
        description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
        position: position,
        point: { pixelSize: 10, color: Cesium.Color.BLUE },
      });
    }

  async function loadModel() {
    console.log("loadModel");
    console.log(Cesium.TimeInterval);
    // Load the glTF model from Cesium ion.
    const airplaneUri = await Cesium.IonResource.fromAssetId("2867724");
    const airplaneEntity = viewer.entities.add({
      availability: new Cesium.TimeIntervalCollection([
        {
          start: start.clone(),
          stop: stop.clone(),
        },
      ]),
      position: positionProperty,
      // Attach the 3D model instead of the green point.
      model: { uri: airplaneUri },
      // Automatically compute the orientation from the position.
      orientation: new Cesium.VelocityOrientationProperty(positionProperty),
      path: new Cesium.PathGraphics({ width: 3 }),
    });

    viewer.trackedEntity = airplaneEntity;
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(-122.39053, 37.61779, 500),
    });
  }
  loadModel();