Multi-part CZML.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta
      name="description"
      content="A CZML example showing a single entity path split across multiple CZML streams."
    />
    <meta
      name="cesium-sandcastle-labels"
      content="Showcases, DataSources, CZML"
    />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>

    <script id="cesium_sandcastle_script">
      function startup(Cesium) {
        "use strict";
        //Sandcastle_Begin
        var viewer = new Cesium.Viewer("cesiumContainer", {
          shouldAnimate: true,
        });

        var statusDisplay = document.createElement("div");
        var fuelDisplay = document.createElement("div");
        var czmlPath = "../../SampleData/";
        var vehicleEntity;

        // Add a blank CzmlDataSource to hold our multi-part entity/entities.
        var dataSource = new Cesium.CzmlDataSource();
        viewer.dataSources.add(dataSource);

        // This demo shows how a single path can be broken up into several CZML streams.
        var partsToLoad = [
          {
            url: "MultipartVehicle_part1.czml",
            range: [0, 1500],
            requested: false,
            loaded: false,
          },
          {
            url: "MultipartVehicle_part2.czml",
            range: [1500, 3000],
            requested: false,
            loaded: false,
          },
          {
            url: "MultipartVehicle_part3.czml",
            range: [3000, 4500],
            requested: false,
            loaded: false,
          },
        ];

        function updateStatusDisplay() {
          var msg = "";
          partsToLoad.forEach(function (part) {
            msg += part.url + " - ";
            if (part.loaded) {
              msg += "Loaded.<br/>";
            } else if (part.requested) {
              msg += "Loading now...<br/>";
            } else {
              msg += "Not needed yet.<br/>";
            }
          });
          statusDisplay.innerHTML = msg;
        }

        // Helper function to mark a part as requested, and process it into the dataSource.
        function processPart(part) {
          part.requested = true;
          updateStatusDisplay();
          dataSource.process(czmlPath + part.url).then(function () {
            part.loaded = true;
            updateStatusDisplay();

            // Follow the vehicle with the camera.
            if (!viewer.trackedEntity) {
              viewer.trackedEntity = vehicleEntity = dataSource.entities.getById(
                "Vehicle"
              );
            }
          });
        }

        // Load the first part up front.
        processPart(partsToLoad[0]);

        // Load a new section before the clock naturally gets there.
        // Note this can't predict when a user may fast-forward to it.
        var preloadTimeInSeconds = 100;

        viewer.clock.onTick.addEventListener(function (clock) {
          // This example uses time offsets from the start to identify which parts need loading.
          var timeOffset = Cesium.JulianDate.secondsDifference(
            clock.currentTime,
            clock.startTime
          );

          // Filter the list of parts to just the ones that need loading right now.
          // Then, process each part that needs loading.
          partsToLoad
            .filter(function (part) {
              return (
                !part.requested &&
                timeOffset >= part.range[0] - preloadTimeInSeconds &&
                timeOffset <= part.range[1]
              );
            })
            .forEach(function (part) {
              processPart(part);
            });

          if (vehicleEntity) {
            var fuel = vehicleEntity.properties.fuel_remaining.getValue(
              clock.currentTime
            );
            if (Cesium.defined(fuel)) {
              fuelDisplay.textContent = "Fuel: " + fuel.toFixed(2) + " gal";
            }
          }
        });

        // Add a reset button, for convenience.
        Sandcastle.addToolbarButton("Reset demo", function () {
          // Put things back to the starting position.
          viewer.clock.currentTime = viewer.clock.startTime;
          viewer.clock.shouldAnimate = true;

          partsToLoad.forEach(function (part) {
            part.requested = false;
            part.loaded = false;
          });

          dataSource.entities.removeAll();
          processPart(partsToLoad[0]);
        });

        // Show the status display below the reset button.
        statusDisplay.style.background = "rgba(42, 42, 42, 0.7)";
        statusDisplay.style.padding = "5px 10px";
        document.getElementById("toolbar").appendChild(statusDisplay);

        // Show a multi-part custom property being read from CZML.
        fuelDisplay.style.background = "rgba(42, 42, 42, 0.7)";
        fuelDisplay.style.padding = "5px 10px";
        fuelDisplay.style.marginTop = "5px";
        document.getElementById("toolbar").appendChild(fuelDisplay);
        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>