CesiumGS · lilleyse · Oct 17, 2022 · Jun 23, 2021 · Jun 24, 2021 · Jun 30, 2021
diff --git a/Apps/Sandcastle/gallery/I3S 3D Object Layer.html b/Apps/Sandcastle/gallery/I3S 3D Object Layer.html
@@ -0,0 +1,176 @@
+<!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="Add I3S 3D Object Layer from a service."
+    />
+    <meta name="cesium-sandcastle-labels" content="DataSources, I3S" />
+    <title>I3S Consumption 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 = function (Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        const viewer = new Cesium.Viewer("cesiumContainer", {
+          terrainProvider: new Cesium.createWorldTerrain({}),
+          animation: false,
+          timeline: false,
+        });
+        //More datasets to tour can be added here...
+        //I3SDataProvider.loadurl api supports loading a single Indexed 3D Scene (I3S) layer (.<host>/SceneServer/layers/<id>) or a collection of scene layers (.<host>/SceneServer) from a scene Scene SceneServer.
+        const tours = {
+          "San Francisco":
+            "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer/layers/0",
+        };
+        // Initialize a terrain provider which provides geoid conversion between gravity releated (typically I3S datasets) and ellipsoidiaL based
+        // height systems (cesium world terrain).
+        // If this is not specified, or the URL is invalid no geoid conversion will be applied.
+        // The source Data used in this transcoding service was compiled from https://earth-info.nga.mil/#tab_wgs84-data and is based on EGM2008 Gravity Model
+        const geoidService = new Cesium.ArcGISTiledElevationTerrainProvider({
+          url:
+            "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer",
+        });
+        // Create i3s and cesiumTileset options to pass optional parameters useful for debuging and visualizing
+        const i3sOptions = {
+          traceFetches: false, // for tracing I3S fetches
+          autoCenterCameraOnStart: true, // auto center to the location of the i3s
+          geoidTiledTerrainProvider: geoidService, // pass the geoid service
+        };
+
+        const cesiumTilesetOptions = {
+          show: true,
+          skipLevelOfDetail: true,
+          debugShowBoundingVolume: false,
+        };
+        //Create I3S data provider. autoCenterCameraOnStart i3s option autocenters the camera to the I3S layers' extent
+        const i3sProvider = new Cesium.I3SDataProvider(
+          "",
+          viewer.scene,
+          i3sOptions,
+          cesiumTilesetOptions
+        );
+        i3sProvider.camera = viewer.camera; // for debug
+        i3sProvider.loadUrl(tours["San Francisco"]).then(function () {});
+        //add the i3s layer provider as a primitive data type
+        viewer.scene.primitives.add(i3sProvider);
+        // An entity object which will hold info about the currently selected feature for infobox display
+        const selectedEntity = new Cesium.Entity();
+        // Silhouette a feature on selection and show metadata in the InfoBox.
+        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
+          movement
+        ) {
+          // Pick a new feature
+          const pickedFeature = viewer.scene.pick(movement.position);
+          if (!Cesium.defined(pickedFeature)) {
+            return;
+          }
+
+          const pickedPosition = viewer.scene.pickPosition(movement.position);
+
+          if (
+            pickedFeature &&
+            pickedFeature.content &&
+            pickedFeature.content.tile.i3sNode
+          ) {
+            const i3sNode = pickedFeature.content.tile.i3sNode;
+            i3sNode.loadFields().then(function () {
+              const geometry = i3sNode.geometryData[0];
+              if (pickedPosition) {
+                const location = geometry.getClosestPointIndexOnTriangle(
+                  pickedPosition.x,
+                  pickedPosition.y,
+                  pickedPosition.z
+                );
+                let description = "No attributes";
+                let name = "";
+                if (
+                  location.index !== -1 &&
+                  geometry.customAttributes["feature-index"]
+                ) {
+                  console.log("Location", location);
+                  const featureIndex =
+                    geometry.customAttributes["feature-index"][location.index];
+                  if (Object.keys(i3sNode.fields).length > 0) {
+                    description =
+                      '<table class="cesium-infoBox-defaultTable"><tbody>';
+                    for (const fieldName in i3sNode.fields) {
+                      if (fieldName) {
+                        const field = i3sNode.fields[fieldName];
+                        description +=
+                          `<tr><th>` + `${field.name}` + `</th><td>`;
+                        description +=
+                          `${field.values[featureIndex]}` + `</td></tr>`;
+                        console.log(
+                          `${field.name}` +
+                            `: ` +
+                            `${field.values[featureIndex]}`
+                        );
+                        if (
+                          (!name || 0 === name.length) &&
+                          isNameProperty(field.name)
+                        ) {
+                          name = field.values[featureIndex];
+                        }
+                      }
+                    }
+                    description += `</tbody></table>`;
+                  }
+                }
+                if (!name || 0 === name.length) {
+                  name = "unknown";
+                }
+                selectedEntity.name = name;
+                selectedEntity.description = description;
+                viewer.selectedEntity = selectedEntity;
+              }
+            });
+          }
+        },
+        Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+        function isNameProperty(propertyName) {
+          const name = propertyName.toLowerCase();
+          if (
+            name.localeCompare("name") === 0 ||
+            name.localeCompare("objname") === 0
+          ) {
+            return true;
+          }
+          return false;
+        }
+        //Sandcastle_End
+        if (typeof Cesium !== "undefined") {
+          window.startupCalled = true;
+          window.startup(Cesium);
+        }
+      };
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/I3S 3D Object Layer.jpg b/Apps/Sandcastle/gallery/I3S 3D Object Layer.jpg
diff --git a/Apps/Sandcastle/gallery/I3S Feature Picking.html b/Apps/Sandcastle/gallery/I3S Feature Picking.html
@@ -0,0 +1,176 @@
+<!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="Pick features from an I3S 3D Object Layer."
+    />
+    <meta name="cesium-sandcastle-labels" content="Showcases, I3S" />
+    <title>I3S Feature Picking 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 = function (Cesium) {
+        "use strict";
+        //Sandcastle_Begin
+        const viewer = new Cesium.Viewer("cesiumContainer", {
+          terrainProvider: new Cesium.createWorldTerrain({}),
+          animation: false,
+          timeline: false,
+        });
+        //More datasets to tour can be added here..
+        //I3SDataProvider.loadurl api supports loading a single Indexed 3D Scene (I3S) layer (.<host>/SceneServer/layers/<id>) or a collection of scene layers (.<host>/SceneServer) from a scene Scene SceneServer.
+        const tours = {
+          "New York":
+            "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/NYC_Attributed_v17/SceneServer",
+        };
+        // Initialize a terrain provider which provides geoid conversion between gravity releated (typically I3S datasets) and ellipsoidiaL based
+        // height systems (cesium world terrain).
+        // If this is not specified, or the URL is invalid no geoid conversion will be applied.
+        // The source Data used in this transcoding service was compiled from https://earth-info.nga.mil/#tab_wgs84-data and is based on EGM2008 Gravity Model
+        const geoidService = new Cesium.ArcGISTiledElevationTerrainProvider({
+          url:
+            "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer",
+        });
+        // Create i3s and cesiumTileset options to pass optional parameters useful for debuging and visualizing
+        const i3sOptions = {
+          traceFetches: false, // for tracing I3S fetches
+          autoCenterCameraOnStart: true, // auto center to the location of the i3s
+          geoidTiledTerrainProvider: geoidService, // pass the geoid service
+        };
+
+        const cesiumTilesetOptions = {
+          show: true,
+          skipLevelOfDetail: true,
+          debugShowBoundingVolume: false,
+        };
+        //Create I3S data provider. autoCenterCameraOnStart i3s option autocenters the camera to the I3S layers' extent
+        const i3sProvider = new Cesium.I3SDataProvider(
+          "",
+          viewer.scene,
+          i3sOptions,
+          cesiumTilesetOptions
+        );
+        i3sProvider.camera = viewer.camera; // for debug
+        i3sProvider.loadUrl(tours["New York"]).then(function () {});
+        //add the i3s layer provider as a primitive data type
+        viewer.scene.primitives.add(i3sProvider);
+        // An entity object which will hold info about the currently selected feature for infobox display
+        const selectedEntity = new Cesium.Entity();
+        // Silhouette a feature on selection and show metadata in the InfoBox.
+        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(
+          movement
+        ) {
+          // Pick a new feature
+          const pickedFeature = viewer.scene.pick(movement.position);
+          if (!Cesium.defined(pickedFeature)) {
+            return;
+          }
+
+          const pickedPosition = viewer.scene.pickPosition(movement.position);
+
+          if (
+            pickedFeature &&
+            pickedFeature.content &&
+            pickedFeature.content.tile.i3sNode
+          ) {
+            const i3sNode = pickedFeature.content.tile.i3sNode;
+            i3sNode.loadFields().then(function () {
+              const geometry = i3sNode.geometryData[0];
+              if (pickedPosition) {
+                const location = geometry.getClosestPointIndexOnTriangle(
+                  pickedPosition.x,
+                  pickedPosition.y,
+                  pickedPosition.z
+                );
+                let description = "No attributes";
+                let name = "";
+                if (
+                  location.index !== -1 &&
+                  geometry.customAttributes["feature-index"]
+                ) {
+                  console.log("Location", location);
+                  const featureIndex =
+                    geometry.customAttributes["feature-index"][location.index];
+                  if (Object.keys(i3sNode.fields).length > 0) {
+                    description =
+                      '<table class="cesium-infoBox-defaultTable"><tbody>';
+                    for (const fieldName in i3sNode.fields) {
+                      if (fieldName) {
+                        const field = i3sNode.fields[fieldName];
+                        description +=
+                          `<tr><th>` + `${field.name}` + `</th><td>`;
+                        description +=
+                          `${field.values[featureIndex]}` + `</td></tr>`;
+                        console.log(
+                          `${field.name}` +
+                            `: ` +
+                            `${field.values[featureIndex]}`
+                        );
+                        if (
+                          (!name || 0 === name.length) &&
+                          isNameProperty(field.name)
+                        ) {
+                          name = field.values[featureIndex];
+                        }
+                      }
+                    }
+                    description += `</tbody></table>`;
+                  }
+                }
+                if (!name || 0 === name.length) {
+                  name = "unknown";
+                }
+                selectedEntity.name = name;
+                selectedEntity.description = description;
+                viewer.selectedEntity = selectedEntity;
+              }
+            });
+          }
+        },
+        Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+        function isNameProperty(propertyName) {
+          const name = propertyName.toLowerCase();
+          if (
+            name.localeCompare("name") === 0 ||
+            name.localeCompare("objname") === 0
+          ) {
+            return true;
+          }
+          return false;
+        }
+        //Sandcastle_End
+        if (typeof Cesium !== "undefined") {
+          window.startupCalled = true;
+          window.startup(Cesium);
+        }
+      };
+    </script>
+  </body>
+</html>
diff --git a/Apps/Sandcastle/gallery/I3S Feature Picking.jpg b/Apps/Sandcastle/gallery/I3S Feature Picking.jpg