How to use terriajs-cesium - 10 common examples

it("polygon is only drawn once", function() {
    var options = { terria: terria };
    var userDrawing = new UserDrawing(options);
    userDrawing.enterDrawMode();
    var pickedFeatures = new PickedFeatures();

    // First point
    // Points around Parliament house
    var pt1Position = new Cartographic(
      CesiumMath.toRadians(149.121),
      CesiumMath.toRadians(-35.309),
      CesiumMath.toRadians(0)
    );
    var pt1CartesianPosition = Ellipsoid.WGS84.cartographicToCartesian(
      pt1Position
    );
    pickedFeatures.pickPosition = pt1CartesianPosition;
    pickedFeatures.allFeaturesAvailablePromise = true;
    userDrawing.terria.mapInteractionModeStack[0].pickedFeatures = pickedFeatures;

    // Second point
    var pt2Position = new Cartographic(
      CesiumMath.toRadians(149.124),
      CesiumMath.toRadians(-35.311),
      CesiumMath.toRadians(0)
    );
    var pt2CartesianPosition = Ellipsoid.WGS84.cartographicToCartesian(

item.clock = new DataSourceClock();
    item.clock.currentTime = JulianDate.fromIso8601("2019-07-03");
    terria.clock.currentTime = JulianDate.fromIso8601("2021-05-11");
    item.isEnabled = true;
    // Force the time to propogate from the terria.clock to the catalogItems.clock.
    terria.clock.tick();
    // These are sanity checks to make sure this test cases is established correctly.
    expect(item.clock.currentTime).toEqual(
      JulianDate.fromIso8601("2019-07-03")
    );
    expect(item.currentTime).toEqual(JulianDate.fromIso8601("2019-07-03"));
    expect(terria.clock.currentTime).toEqual(
      JulianDate.fromIso8601("2021-05-11")
    );

    item.currentTime = JulianDate.fromIso8601("2031-03-23");
    expect(item.clock.currentTime).toEqual(
      JulianDate.fromIso8601("2031-03-23")
    );
    expect(item.currentTime).toEqual(JulianDate.fromIso8601("2031-03-23"));
    expect(terria.clock.currentTime).toEqual(
      JulianDate.fromIso8601("2021-05-11")
    );
  });

const template = "<div>{{terria.currentTime}}</div>";

      const timeInterval = new TimeInterval({
        start: JulianDate.fromIso8601("2017-11-23T19:47:53+11:00"),
        stop: JulianDate.fromIso8601("2018-01-03T07:05:00Z"),
        isStartIncluded: true,
        isStopIncluded: false
      });
      const intervals = new TimeIntervalCollection([timeInterval]);
      const availableDate = JulianDate.toDate(timeInterval.start);
      catalogItem.intervals = intervals;
      catalogItem.availableDates = [availableDate];

      catalogItem.canUseOwnClock = true;
      catalogItem.useOwnClock = true;
      catalogItem.clock.currentTime = JulianDate.fromIso8601(
        "2017-12-19T17:13:11+07:00"
      );
      terria.clock.currentTime = JulianDate.fromIso8601(
        "2001-01-01T01:01:01+01:00"
      ); // An decoy date to make sure that we are indeed using the catalog items clock and not terria.clock.
      const section = (
         {}}
        /&gt;
      );
      const result = getShallowRenderedOutput(section);

// Force the time to propogate from the terria.clock to the catalogItems.clock.
    terria.clock.tick();
    // These are sanity checks to make sure this test cases is established correctly.
    expect(item.clock.currentTime).toEqual(
      JulianDate.fromIso8601("2021-05-11")
    );
    expect(item.currentTime).toEqual(JulianDate.fromIso8601("2021-05-11"));
    expect(terria.clock.currentTime).toEqual(
      JulianDate.fromIso8601("2021-05-11")
    );

    terria.clock.currentTime = JulianDate.fromIso8601("2023-11-29");
    // Don't need to explicitly propogate the value as it should be copied when useOwnClock is changed.
    item.useOwnClock = true;
    expect(item.clock.currentTime).toEqual(
      JulianDate.fromIso8601("2023-11-29")
    );
    expect(item.currentTime).toEqual(JulianDate.fromIso8601("2023-11-29"));
    expect(terria.clock.currentTime).toEqual(
      JulianDate.fromIso8601("2023-11-29")
    );
  });

expect(userDrawing.otherEntities.entities.values.length).toEqual(1);

    // Now pick the first point
    pickedFeatures.pickPosition = pt1CartesianPosition;
    pickedFeatures.allFeaturesAvailablePromise = true;
    // If in the UI the user clicks on a point, it returns that entity, so we're pulling it out of userDrawing and
    // pretending the user actually clicked on it.
    var pt1Entity = userDrawing.pointEntities.entities.values[0];
    pickedFeatures.features = [pt1Entity];
    userDrawing.terria.mapInteractionModeStack[0].pickedFeatures = pickedFeatures;
    expect(userDrawing.closeLoop).toBeTruthy();
    expect(userDrawing.otherEntities.entities.values.length).toEqual(2);

    // Another point. Polygon is still closed.
    var newPtPosition = new Cartographic(
      CesiumMath.toRadians(149.0),
      CesiumMath.toRadians(-35.0),
      CesiumMath.toRadians(0)
    );
    var newPtCartesianPosition = Ellipsoid.WGS84.cartographicToCartesian(
      newPtPosition
    );
    pickedFeatures.pickPosition = newPtCartesianPosition;
    userDrawing.terria.mapInteractionModeStack[0].pickedFeatures = pickedFeatures;

    expect(userDrawing.closeLoop).toBeTruthy();
    expect(userDrawing.otherEntities.entities.values.length).toEqual(2);
  });

// Points around Parliament house
    var pt1Position = new Cartographic(
      CesiumMath.toRadians(149.121),
      CesiumMath.toRadians(-35.309),
      CesiumMath.toRadians(0)
    );
    var pt1CartesianPosition = Ellipsoid.WGS84.cartographicToCartesian(
      pt1Position
    );
    pickedFeatures.pickPosition = pt1CartesianPosition;
    pickedFeatures.allFeaturesAvailablePromise = true;
    userDrawing.terria.mapInteractionModeStack[0].pickedFeatures = pickedFeatures;

    // Second point
    var pt2Position = new Cartographic(
      CesiumMath.toRadians(149.124),
      CesiumMath.toRadians(-35.311),
      CesiumMath.toRadians(0)
    );
    var pt2CartesianPosition = Ellipsoid.WGS84.cartographicToCartesian(
      pt2Position
    );
    pickedFeatures.pickPosition = pt2CartesianPosition;
    userDrawing.terria.mapInteractionModeStack[0].pickedFeatures = pickedFeatures;

    // Third point
    var pt3Position = new Cartographic(
      CesiumMath.toRadians(149.127),
      CesiumMath.toRadians(-35.308),
      CesiumMath.toRadians(0)
    );
    var pt3CartesianPosition = Ellipsoid.WGS84.cartographicToCartesian(

function getStyle(wmsItem) {
  const thisLayer = wmsItem._thisLayerInRawMetadata;
  if (!defined(thisLayer)) {
    console.log("cannot find current layer");
    return undefined;
  }

  var style;
  const availStyles = wmsItem.availableStyles[thisLayer.Name];
  if (availStyles.length >= 2) {
    const layers = wmsItem.layers.split(",");
    const layerIndex = layers.indexOf(thisLayer.Name);
    if (layerIndex === -1) {
      // Not a valid layer?  Something went wrong.
      console.log("cannot find layer index");
      return undefined;
    }

    const styles = wmsItem.styles.split(",");

enterUpdateAndExit(
    d3Element,
    titleSettings,
    margin,
    state,
    transitionDuration
  ) {
    // The title might be the legend, or a simple string.
    const title = d3Element
      .select("." + Title.className(titleSettings))
      .style("top", margin.top + "px");
    title
      .transition()
      .duration(transitionDuration)
      .style("opacity", Title.getHeight(titleSettings) > 0 ? 1 : 1e-6);
    if (defined(titleSettings)) {
      let titleData = state.data;
      if (titleSettings.type === "string") {
        titleData = [{ id: "_string__", name: titleSettings.title }];
      }

      // in d3 v4,  selection.data method returns new selections
      // rather than modifying the selection in-place.
      const titleComponents = title
        .selectAll(".title-component")
        .data(titleData, d => d.id);
      // Check whether there are multiple category names and/or column names.
      const numberOfCategories = d3Nest().key(d => d.categoryName).length;
      const numberOfColumnNames = d3Nest().key(d => d.name).length;
      // This is to only show the interesting parts of the name & categoryName in the title,
      // similar to Tooltip.js.
      const getName = function(d, index) {

promises.push(loadText(url)
        .then(function(xml) {
            that.loadRegionsFromXML(xml, undefined, "serverReplacements");
        }).otherwise(function(err) {
            console.log(err);
            throw(err);
        }));
    // if this column might be ambiguous then fetch the disambiguating values for each column as well (usually State)
    if (this.disambigProp) {
        url = baseuri.setQuery('valueReference', this.disambigProp).toString();
        promises.push(loadText(url).then(function(xml) {
            that.loadRegionsFromXML(xml, that.disambigProp, "disambigServerReplacements");
        }));
    }
    return when.all(promises).yield(true);
};

Cesium3DTilesCatalogItem.prototype.syncMaximumScreenSpaceError = function() {
  if (defined(this._tileset) && !this.options.maximumScreenSpaceError) {
    if (!defined(this.terria.cesium)) {
      return;
    }
    // default is 16 (baseMaximumScreenSpaceError @ 2)
    // we want to reduce to 8 for higher levels of quality
    // the slider goes from [quality] 1 to 3 [performance]
    // in 0.1 steps
    const baseMax = this.terria.baseMaximumScreenSpaceError;

    /**
     * kring;
     * >but most datasets are set up with Cesium's default of 16 in mind so they'll look good with that default
     * >SSE is a projection of the tile's "geometric error" (in meters) to the screen. What effect that has kinda depends on how the tileset is structured
     * >like for the aero3Dpro datasets, because of the way they've set up their levels and geometric error, 16 looks pretty terrible
     * >and if you set it to 1 instead you'd get like 16 * 16 more detail and probably crash the browser
     * >(it's squared for 2D, more like cubed for something that's truly 3D)
     */