Rough polygon feature prototype:

CesiumGS · Feb 4, 2025 · 2773acb · 2773acb
1 parent dc667cd
commit 2773acb
Show file tree

Hide file tree

Showing 14 changed files with 1,401 additions and 4 deletions.
diff --git a/Apps/Sandcastle/gallery/Features – WFS.html b/Apps/Sandcastle/gallery/Features – WFS.html
@@ -0,0 +1,85 @@
+<!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="Render vector data features." />
+    <meta name="cesium-sandcastle-labels" content="Geometries" />
+    <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">
+      window.startup = async function (Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        const viewer = new Cesium.Viewer("cesiumContainer");
+
+        const pageSize = 100;
+        const layer = new Cesium.FeatureLayer({
+          name: "Vineyards",
+        });
+
+        let href = `https://demo.ldproxy.net/vineyards/collections/vineyards/items?limit=${pageSize}&f=json`;
+        const response = await fetch(href);
+        let geojson = await response.json();
+        console.log(`${geojson.numberMatched} total features`);
+        const getNextPage = () =>
+          geojson.links.find((page) => {
+            return page.rel === "next";
+          })?.href;
+
+        layer.addGeoJson(geojson);
+
+        let timer = 0;
+        layer.viewChanged.addEventListener(() => {
+          timer = performance.now();
+          console.log("view changed...");
+        });
+        layer.viewReady.addEventListener(() => {
+          const ms = performance.now() - timer;
+          console.log(`view ready in ${Math.floor(ms)} ms`);
+        });
+
+        viewer.scene.primitives.add(layer);
+
+        viewer.scene.debugShowFramesPerSecond = true;
+
+        viewer.camera.flyTo({
+          destination: layer.rectangle,
+        });
+
+        while ((href = getNextPage())) {
+          const response = await fetch(href);
+          geojson = await response.json();
+          layer.addGeoJson(geojson);
+        }
+        //Sandcastle_End
+      };
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        window.startup(Cesium).catch((error) => {
+          "use strict";
+          console.error(error);
+        });
+        Sandcastle.finishedLoading();
+      }
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/Features.html b/Apps/Sandcastle/gallery/Features.html
@@ -0,0 +1,111 @@
+<!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="Render vector data features." />
+    <meta name="cesium-sandcastle-labels" content="Geometries" />
+    <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">
+      window.startup = async function (Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        const viewer = new Cesium.Viewer("cesiumContainer");
+        // const data = {
+        //     type: 'Feature',
+        //     geometry: {
+        //         type: 'Polygon',
+        //         coordinates: [
+        //             [
+        //                 [-67.13734, 45.13745],
+        //                 [-66.96466, 44.8097],
+        //                 [-68.03252, 44.3252],
+        //                 [-69.06, 43.98],
+        //                 [-70.11617, 43.68405],
+        //                 [-70.64573, 43.09008],
+        //                 [-70.75102, 43.08003],
+        //                 [-70.79761, 43.21973],
+        //                 [-70.98176, 43.36789],
+        //                 [-70.94416, 43.46633],
+        //                 [-71.08482, 45.30524],
+        //                 [-70.66002, 45.46022],
+        //                 [-70.30495, π45.91479],
+        //                 [-70.00014, 46.69317],
+        //                 [-69.23708, 47.44777],
+        //                 [-68.90478, 47.18479],
+        //                 [-68.2343, 47.35462],
+        //                 [-67.79035, 47.06624],
+        //                 [-67.79141, 45.70258],
+        //                 [-67.13734, 45.13745]
+        //             ]
+        //         ]
+        //     }
+        // };
+
+        // const layer = new Cesium.FeatureLayer({
+        //     name: "Maine",
+        // });
+        // const feature = layer.addGeoJsonFeature(data);
+
+        //const response = await fetch("https://public.opendatasoft.com/api/explore/v2.1/catalog/datasets/world-administrative-boundaries/exports/geojson?lang=en&timezone=America%2FNew_York");
+        const response = await fetch(
+          "https://demo.ldproxy.net/vineyards/collections/vineyards/items?limit=10000&f=json",
+        );
+
+        const geojson = await response.json();
+        console.log("loaded json");
+        //console.log(geojson);
+
+        const layer = new Cesium.FeatureLayer({
+          name: "Countries",
+        });
+        layer.addGeoJson(geojson);
+
+        let timer = 0;
+        layer.viewChanged.addEventListener(() => {
+          timer = performance.now();
+          console.log("view changed...");
+        });
+        layer.viewReady.addEventListener(() => {
+          const ms = performance.now() - timer;
+          console.log(`view ready in ${Math.floor(ms)} ms`);
+        });
+
+        viewer.scene.primitives.add(layer);
+
+        console.log(layer);
+
+        viewer.scene.debugShowFramesPerSecond = true;
+
+        //Sandcastle_End
+      };
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        window.startup(Cesium).catch((error) => {
+          "use strict";
+          console.error(error);
+        });
+        Sandcastle.finishedLoading();
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/engine/Source/Core/RectangleCollisionChecker.js b/packages/engine/Source/Core/RectangleCollisionChecker.js
@@ -35,7 +35,7 @@ RectangleWithId.fromRectangleAndId = function (id, rectangle, result) {
  */
 RectangleCollisionChecker.prototype.insert = function (id, rectangle) {
   //>>includeStart('debug', pragmas.debug);
-  Check.typeOf.string("id", id);
+  Check.defined("id", id);
   Check.typeOf.object("rectangle", rectangle);
   //>>includeEnd('debug');
 
@@ -61,7 +61,7 @@ const removalScratch = new RectangleWithId();
  */
 RectangleCollisionChecker.prototype.remove = function (id, rectangle) {
   //>>includeStart('debug', pragmas.debug);
-  Check.typeOf.string("id", id);
+  Check.typeOf.defined("id", id);
   Check.typeOf.object("rectangle", rectangle);
   //>>includeEnd('debug');
 
@@ -92,4 +92,22 @@ RectangleCollisionChecker.prototype.collides = function (rectangle) {
   );
   return this._tree.collides(withId);
 };
+
+/**
+ * TODO
+ * @param {Rectangle} rectangle A Rectangle that should be checked against the rectangles in the collision checker.
+ * @returns {Array} Whether the rectangle collides with any of the rectangles in the collision checker.
+ */
+RectangleCollisionChecker.prototype.search = function (rectangle) {
+  //>>includeStart('debug', pragmas.debug);
+  Check.typeOf.object("rectangle", rectangle);
+  //>>includeEnd('debug');
+
+  const withId = RectangleWithId.fromRectangleAndId(
+    "",
+    rectangle,
+    collisionScratch,
+  );
+  return this._tree.search(withId)?.map((item) => item.id);
+};
 export default RectangleCollisionChecker;
diff --git a/packages/engine/Source/Core/Stereographic.js b/packages/engine/Source/Core/Stereographic.js
@@ -11,8 +11,9 @@ import Ray from "./Ray.js";
 
 /**
  * Represents a point in stereographic coordinates, which can be obtained by projecting a cartesian coordinate from one pole onto a tangent plane at the other pole.
- * The stereographic projection faithfully represents the relative directions of all great circles passing through its center point.
- * To faithfully represents angles everywhere, this is a conformal projection, which means points are projected onto an arbrary sphere.
+ * The stereographic projection is limited to showing only about three-quarters of the ellipsoid. The opposite pole cannot be projected.
+ * Due to enormous distortion of area, distance, and scale, the use of this projection is normally limited to one hemisphere.
+ * The stereographic projection is a conformal projection, meaning it faithfully represents the relative directions and angles.
  * @param {Cartesian2} [position] The steroegraphic coordinates.
  * @param {EllipseGeometry} [tangentPlane] The tangent plane onto which the point was projected.
  */

diff --git a/packages/engine/Source/Geometries/Feature.js b/packages/engine/Source/Geometries/Feature.js
@@ -0,0 +1,32 @@
+import createGuid from "../Core/createGuid";
+
+class Feature {
+  constructor({ id, geometry }) {
+    this._id = id ?? createGuid();
+    this._geometry = geometry;
+    this._metadata = {};
+
+    // TODO: Does styling live here?
+  }
+
+  // TODO
+  get id() {
+    return this._id;
+  }
+
+  /**
+   * Gets the geometry for this feature
+   * @type {FeatureGeometry}
+   * @readonly
+   */
+  get geometry() {
+    return this._geometry;
+  }
+
+  // TODO
+  get metadata() {
+    return this._metadata;
+  }
+}
+
+export default Feature;
diff --git a/packages/engine/Source/Geometries/FeatureGeometry.js b/packages/engine/Source/Geometries/FeatureGeometry.js
@@ -0,0 +1,3 @@
+class FeatureGeometry {}
+
+export default FeatureGeometry;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		class FeatureGeometry {}

		export default FeatureGeometry;