@cesium/engine 9.1.0 → 10.0.0

package/Source/Scene/Camera.js

@@ -1436,7 +1436,7 @@ const scratchHpr = new HeadingPitchRoll();
  * Sets the camera position, orientation and transform.
  *
  * @param {object} options Object with the following properties:
- * @param {Cartesian3|Rectangle} [options.destination] The final position of the camera in WGS84 (world) coordinates or a rectangle that would be visible from a top-down view.
+ * @param {Cartesian3|Rectangle} [options.destination] The final position of the camera in world coordinates or a rectangle that would be visible from a top-down view.
  * @param {HeadingPitchRollValues|DirectionUp} [options.orientation] An object that contains either direction and up properties or heading, pitch and roll properties. By default, the direction will point
  * towards the center of the frame in 3D and in the negative z direction in Columbus view. The up direction will point towards local north in 3D and in the positive
  * y direction in Columbus view. Orientation is not used in 2D when in infinite scrolling mode.
@@ -2343,9 +2343,12 @@ Camera.prototype.lookAt = function (target, offset) {
   }
   //>>includeEnd('debug');
 
+  const scene = this._scene;
+  const ellipsoid = defaultValue(scene.ellipsoid, Ellipsoid.default);
+
   const transform = Transforms.eastNorthUpToFixedFrame(
     target,
-    Ellipsoid.WGS84,
+    ellipsoid,
     scratchLookAtMatrix4
   );
   this.lookAtTransform(transform, offset);
@@ -2841,7 +2844,7 @@ Camera.prototype.getRectangleCameraCoordinates = function (rectangle, result) {
 
 const pickEllipsoid3DRay = new Ray();
 function pickEllipsoid3D(camera, windowPosition, ellipsoid, result) {
-  ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84);
+  ellipsoid = defaultValue(ellipsoid, Ellipsoid.default);
   const ray = camera.getPickRay(windowPosition, pickEllipsoid3DRay);
   const intersection = IntersectionTests.rayEllipsoid(ray, ellipsoid);
   if (!intersection) {
@@ -2893,7 +2896,7 @@ function pickMapColumbusView(camera, windowPosition, projection, result) {
  * Pick an ellipsoid or map.
  *
  * @param {Cartesian2} windowPosition The x and y coordinates of a pixel.
- * @param {Ellipsoid} [ellipsoid=Ellipsoid.WGS84] The ellipsoid to pick.
+ * @param {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid to pick.
  * @param {Cartesian3} [result] The object onto which to store the result.
  * @returns {Cartesian3 | undefined} If the ellipsoid or map was picked,
  * returns the point on the surface of the ellipsoid or map in world
@@ -2902,7 +2905,7 @@ function pickMapColumbusView(camera, windowPosition, projection, result) {
  * @example
  * const canvas = viewer.scene.canvas;
  * const center = new Cesium.Cartesian2(canvas.clientWidth / 2.0, canvas.clientHeight / 2.0);
- * const ellipsoid = viewer.scene.globe.ellipsoid;
+ * const ellipsoid = viewer.scene.ellipsoid;
  * const result = viewer.camera.pickEllipsoid(center, ellipsoid);
  */
 Camera.prototype.pickEllipsoid = function (windowPosition, ellipsoid, result) {
@@ -2921,7 +2924,7 @@ Camera.prototype.pickEllipsoid = function (windowPosition, ellipsoid, result) {
     result = new Cartesian3();
   }
 
-  ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84);
+  ellipsoid = defaultValue(ellipsoid, Ellipsoid.default);
 
   if (this._mode === SceneMode.SCENE3D) {
     result = pickEllipsoid3D(this, windowPosition, ellipsoid, result);
@@ -3316,7 +3319,7 @@ Camera.prototype.completeFlight = function () {
  * Flies the camera from its current position to a new position.
  *
  * @param {object} options Object with the following properties:
- * @param {Cartesian3|Rectangle} options.destination The final position of the camera in WGS84 (world) coordinates or a rectangle that would be visible from a top-down view.
+ * @param {Cartesian3|Rectangle} options.destination The final position of the camera in world coordinates or a rectangle that would be visible from a top-down view.
  * @param {object} [options.orientation] An object that contains either direction and up properties or heading, pitch and roll properties. By default, the direction will point
  * towards the center of the frame in 3D and in the negative z direction in Columbus view. The up direction will point towards local north in 3D and in the positive
  * y direction in Columbus view.  Orientation is not used in 2D when in infinite scrolling mode.
@@ -3632,9 +3635,12 @@ Camera.prototype.flyToBoundingSphere = function (boundingSphere, options) {
     );
   }
 
+  const scene = this._scene;
+  const ellipsoid = defaultValue(scene.ellipsoid, Ellipsoid.default);
+
   const transform = Transforms.eastNorthUpToFixedFrame(
     boundingSphere.center,
-    Ellipsoid.WGS84,
+    ellipsoid,
     scratchflyToBoundingSphereTransform
   );
   Matrix4.multiplyByPoint(transform, position, position);
@@ -3814,13 +3820,13 @@ function addToResult(x, y, index, camera, ellipsoid, computedHorizonQuad) {
 /**
  * Computes the approximate visible rectangle on the ellipsoid.
  *
- * @param {Ellipsoid} [ellipsoid=Ellipsoid.WGS84] The ellipsoid that you want to know the visible region.
+ * @param {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid that you want to know the visible region.
  * @param {Rectangle} [result] The rectangle in which to store the result
  *
  * @returns {Rectangle|undefined} The visible rectangle or undefined if the ellipsoid isn't visible at all.
  */
 Camera.prototype.computeViewRectangle = function (ellipsoid, result) {
-  ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84);
+  ellipsoid = defaultValue(ellipsoid, Ellipsoid.default);
   const cullingVolume = this.frustum.computeCullingVolume(
     this.positionWC,
     this.directionWC,

package/Source/Scene/Cesium3DTileset.js

@@ -3568,7 +3568,7 @@ Cesium3DTileset.prototype.getHeight = function (cartographic, scene) {
   Check.typeOf.object("scene", scene);
   //>>includeEnd('debug');
 
-  let ellipsoid = scene.globe?.ellipsoid;
+  let ellipsoid = scene.ellipsoid;
   if (!defined(ellipsoid)) {
     ellipsoid = Ellipsoid.WGS84;
   }

package/Source/Scene/ClippingPolygon.js

@@ -15,7 +15,7 @@ import Rectangle from "../Core/Rectangle.js";
  *
  * @param {object} options Object with the following properties:
  * @param {Cartesian3[]} options.positions A list of three or more Cartesian coordinates defining the outer ring of the clipping polygon.
- * @param {Ellipsoid} [options.ellipsoid=Ellipsoid.WGS84]
+ * @param {Ellipsoid} [options.ellipsoid=Ellipsoid.default]
  *
  * @example
  * const positions = Cesium.Cartesian3.fromRadiansArray([
@@ -46,7 +46,7 @@ function ClippingPolygon(options) {
   );
   //>>includeEnd('debug');
 
-  this._ellipsoid = defaultValue(options.ellipsoid, Ellipsoid.WGS84);
+  this._ellipsoid = defaultValue(options.ellipsoid, Ellipsoid.default);
   this._positions = [...options.positions];
 }
 

package/Source/Scene/ClippingPolygonCollection.js

@@ -737,7 +737,7 @@ const scratchRectangleIntersection = new Rectangle();
  * @private
  *
  * @param {object} tileBoundingVolume The volume to determine the intersection with the polygons.
- * @param {Ellipsoid} [ellipsoid=WGS84] The ellipsoid on which the bounding volumes are defined.
+ * @param {Ellipsoid} [ellipsoid=Ellipsoid.default] The ellipsoid on which the bounding volumes are defined.
  * @returns {Intersect} The intersection type: {@link Intersect.OUTSIDE} if the entire volume is not clipped, {@link Intersect.INSIDE}
  *                      if the entire volume should be clipped, and {@link Intersect.INTERSECTING} if the volume intersects the polygons and will partially clipped.
  */

package/Source/Scene/CreditDisplay.js

@@ -163,112 +163,102 @@ function styleLightboxContainer(that) {
   }
 }
 
-function addStyle(selector, styles) {
-  let style = `${selector} {`;
-  for (const attribute in styles) {
-    if (styles.hasOwnProperty(attribute)) {
-      style += `${attribute}: ${styles[attribute]}; `;
-    }
-  }
-  style += " }\n";
-  return style;
-}
-
 function appendCss(container) {
-  let style = "";
-  style += addStyle(".cesium-credit-lightbox-overlay", {
-    display: "none",
-    "z-index": "1", //must be at least 1 to draw over top other Cesium widgets
-    position: "absolute",
-    top: "0",
-    left: "0",
-    width: "100%",
-    height: "100%",
-    "background-color": "rgba(80, 80, 80, 0.8)",
-  });
-
-  style += addStyle(".cesium-credit-lightbox", {
-    "background-color": "#303336",
-    color: textColor,
-    position: "relative",
-    "min-height": `${lightboxHeight}px`,
-    margin: "auto",
-  });
-
-  style += addStyle(
-    ".cesium-credit-lightbox > ul > li a, .cesium-credit-lightbox > ul > li a:visited",
-    {
-      color: textColor,
-    }
-  );
-
-  style += addStyle(".cesium-credit-lightbox > ul > li a:hover", {
-    color: highlightColor,
-  });
-
-  style += addStyle(".cesium-credit-lightbox.cesium-credit-lightbox-expanded", {
-    border: "1px solid #444",
-    "border-radius": "5px",
-    "max-width": "370px",
-  });
-
-  style += addStyle(".cesium-credit-lightbox.cesium-credit-lightbox-mobile", {
-    height: "100%",
-    width: "100%",
-  });
-
-  style += addStyle(".cesium-credit-lightbox-title", {
-    padding: "20px 20px 0 20px",
-  });
-
-  style += addStyle(".cesium-credit-lightbox-close", {
-    "font-size": "18pt",
-    cursor: "pointer",
-    position: "absolute",
-    top: "0",
-    right: "6px",
-    color: textColor,
-  });
+  const style = /*css*/ `
+.cesium-credit-lightbox-overlay {
+  display: none;
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(80, 80, 80, 0.8);
+}
 
-  style += addStyle(".cesium-credit-lightbox-close:hover", {
-    color: highlightColor,
-  });
+.cesium-credit-lightbox {
+  background-color: #303336;
+  color: ${textColor};
+  position: relative;
+  min-height: ${lightboxHeight}px;
+  margin: auto;
+}
+.cesium-credit-lightbox > ul > li a,
+.cesium-credit-lightbox > ul > li a:visited,
+.cesium-credit-wrapper a,
+.cesium-credit-wrapper a:visited {
+  color: ${textColor};
+}
+.cesium-credit-lightbox > ul > li a:hover {
+  color: ${highlightColor};
+}
+.cesium-credit-lightbox.cesium-credit-lightbox-expanded {
+  border: 1px solid #444;
+  border-radius: 5px;
+  max-width: 370px;
+}
+.cesium-credit-lightbox.cesium-credit-lightbox-mobile {
+  height: 100%;
+  width: 100%;
+}
+.cesium-credit-lightbox-title {
+  padding: 20px 20px 0 20px;
+}
+.cesium-credit-lightbox-close {
+  font-size: 18pt;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 6px;
+  color: ${textColor};
+}
+.cesium-credit-lightbox-close:hover {
+  color: ${highlightColor};
+}
+.cesium-credit-lightbox > ul {
+  margin: 0;
+  padding: 12px 20px 12px 40px;
+  font-size: 13px;
+}
+.cesium-credit-lightbox > ul > li {
+  padding-bottom: 6px;
+}
+.cesium-credit-lightbox > ul > li * {
+  padding: 0;
+  margin: 0;
+}
 
-  style += addStyle(".cesium-credit-lightbox > ul", {
-    margin: "0",
-    padding: "12px 20px 12px 40px",
-    "font-size": "13px",
-  });
+.cesium-credit-expand-link {
+  padding-left: 5px;
+  cursor: pointer;
+  text-decoration: underline;
+  color: ${textColor};
+}
+.cesium-credit-expand-link:hover {
+  color: ${highlightColor};
+}
 
-  style += addStyle(".cesium-credit-lightbox > ul > li", {
-    "padding-bottom": "6px",
-  });
+.cesium-credit-text {
+  color: ${textColor};
+}
 
-  style += addStyle(".cesium-credit-lightbox > ul > li *", {
-    padding: "0",
-    margin: "0",
-  });
+.cesium-credit-delimiter {
+  padding: 0 5px;
+}
 
-  style += addStyle(".cesium-credit-expand-link", {
-    "padding-left": "5px",
-    cursor: "pointer",
-    "text-decoration": "underline",
-    color: textColor,
-  });
-  style += addStyle(".cesium-credit-expand-link:hover", {
-    color: highlightColor,
-  });
+.cesium-credit-textContainer *,
+.cesium-credit-logoContainer * {
+  display: inline;
+}
 
-  style += addStyle(".cesium-credit-text", {
-    color: textColor,
-  });
+.cesium-credit-textContainer a:hover {
+  color: ${highlightColor}
+}
 
-  style += addStyle(
-    ".cesium-credit-textContainer *, .cesium-credit-logoContainer *",
-    {
-      display: "inline",
-    }
-  );
+.cesium-credit-textContainer .cesium-credit-wrapper:first-of-type {
+  padding-left: 5px;
+}
+`;
 
   function getShadowRoot(container) {
     if (container.shadowRoot) {
@@ -287,16 +277,16 @@ function appendCss(container) {
     getShadowRoot(container),
     document.head
   );
-  const css = document.createElement("style");
-  css.innerHTML = style;
-  shadowRootOrDocumentHead.appendChild(css);
+  const styleElem = document.createElement("style");
+  styleElem.innerHTML = style;
+  shadowRootOrDocumentHead.appendChild(styleElem);
 }
 
 /**
  * The credit display is responsible for displaying credits on screen.
  *
  * @param {HTMLElement} container The HTML element where credits will be displayed
- * @param {string} [delimiter= ' • '] The string to separate text credits
+ * @param {string} [delimiter= '•'] The string to separate text credits
  * @param {HTMLElement} [viewport=document.body] The HTML element that will contain the credits popup
  *
  * @alias CreditDisplay
@@ -369,7 +359,7 @@ function CreditDisplay(container, delimiter, viewport) {
   appendCss(container);
   const cesiumCredit = Credit.clone(CreditDisplay.cesiumCredit);
 
-  this._delimiter = defaultValue(delimiter, " • ");
+  this._delimiter = defaultValue(delimiter, "•");
   this._screenContainer = screenContainer;
   this._cesiumCreditContainer = cesiumCreditContainer;
   this._lastViewportHeight = undefined;
@@ -634,7 +624,7 @@ function getDefaultCredit() {
     }
 
     defaultCredit = new Credit(
-      `<a href="https://cesium.com/" target="_blank"><img src="${logo}" title="Cesium ion"/></a>`,
+      `<a href="https://cesium.com/" target="_blank"><img src="${logo}" style="vertical-align: -7px" title="Cesium ion"/></a>`,
       true
     );
   }

package/Source/Scene/Globe.js

@@ -28,6 +28,7 @@ import ImageryLayerCollection from "./ImageryLayerCollection.js";
 import QuadtreePrimitive from "./QuadtreePrimitive.js";
 import SceneMode from "./SceneMode.js";
 import ShadowMode from "./ShadowMode.js";
+import CesiumMath from "../Core/Math.js";
 
 /**
  * The globe rendered in the scene, including its terrain ({@link Globe#terrainProvider})
@@ -36,11 +37,11 @@ import ShadowMode from "./ShadowMode.js";
  * @alias Globe
  * @constructor
  *
- * @param {Ellipsoid} [ellipsoid=Ellipsoid.WGS84] Determines the size and shape of the
+ * @param {Ellipsoid} [ellipsoid=Ellipsoid.default] Determines the size and shape of the
  * globe.
  */
 function Globe(ellipsoid) {
-  ellipsoid = defaultValue(ellipsoid, Ellipsoid.WGS84);
+  ellipsoid = defaultValue(ellipsoid, Ellipsoid.default);
   const terrainProvider = new EllipsoidTerrainProvider({
     ellipsoid: ellipsoid,
   });
@@ -191,9 +192,9 @@ function Globe(ellipsoid) {
    * Enable the ground atmosphere, which is drawn over the globe when viewed from a distance between <code>lightingFadeInDistance</code> and <code>lightingFadeOutDistance</code>.
    *
    * @type {boolean}
-   * @default true
+   * @default true when using the WGS84 ellipsoid, false otherwise
    */
-  this.showGroundAtmosphere = true;
+  this.showGroundAtmosphere = Ellipsoid.WGS84.equals(ellipsoid);
 
   /**
    * The intensity of the light that is used for computing the ground atmosphere color.
@@ -250,18 +251,19 @@ function Globe(ellipsoid) {
    * when <code>enableLighting</code> or <code>showGroundAtmosphere</code> is <code>true</code>.
    *
    * @type {number}
-   * @default 10000000.0
+   * @default 1/2 * pi * ellipsoid.minimumRadius
    */
-  this.lightingFadeOutDistance = 1.0e7;
+  this.lightingFadeOutDistance =
+    CesiumMath.PI_OVER_TWO * ellipsoid.minimumRadius;
 
   /**
    * The distance where lighting resumes. This only takes effect
    * when <code>enableLighting</code> or <code>showGroundAtmosphere</code> is <code>true</code>.
    *
    * @type {number}
-   * @default 20000000.0
+   * @default pi * ellipsoid.minimumRadius
    */
-  this.lightingFadeInDistance = 2.0e7;
+  this.lightingFadeInDistance = CesiumMath.PI * ellipsoid.minimumRadius;
 
   /**
    * The distance where the darkness of night from the ground atmosphere fades out to a lit ground atmosphere.
@@ -269,9 +271,9 @@ function Globe(ellipsoid) {
    * <code>dynamicAtmosphereLighting</code> are <code>true</code>.
    *
    * @type {number}
-   * @default 10000000.0
+   * @default 1/2 * pi * ellipsoid.minimumRadius
    */
-  this.nightFadeOutDistance = 1.0e7;
+  this.nightFadeOutDistance = CesiumMath.PI_OVER_TWO * ellipsoid.minimumRadius;
 
   /**
    * The distance where the darkness of night from the ground atmosphere fades in to an unlit ground atmosphere.
@@ -279,9 +281,10 @@ function Globe(ellipsoid) {
    * <code>dynamicAtmosphereLighting</code> are <code>true</code>.
    *
    * @type {number}
-   * @default 50000000.0
+   * @default 5/2 * pi * ellipsoid.minimumRadius
    */
-  this.nightFadeInDistance = 5.0e7;
+  this.nightFadeInDistance =
+    5.0 * CesiumMath.PI_OVER_TWO * ellipsoid.minimumRadius;
 
   /**
    * True if an animated wave effect should be shown in areas of the globe
@@ -809,7 +812,7 @@ Globe.prototype.pick = function (ray, scene, result) {
   if (defined(result) && scene.mode !== SceneMode.SCENE3D) {
     result = Cartesian3.fromElements(result.y, result.z, result.x, result);
     const carto = scene.mapProjection.unproject(result, cartoScratch);
-    result = scene.globe.ellipsoid.cartographicToCartesian(carto, result);
+    result = this._ellipsoid.cartographicToCartesian(carto, result);
   }
 
   return result;