CesiumGS · jjspace · Jan 31, 2025 · Feb 3, 2025 · Feb 4, 2025 · Feb 4, 2025
diff --git a/Apps/Sandcastle/gallery/development/OGC Feature Provider.html b/Apps/Sandcastle/gallery/development/OGC Feature Provider.html
@@ -0,0 +1,206 @@
+<!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="OGC Features Provider" />
+    <meta name="cesium-sandcastle-labels" content="Development" />
+    <title>OGC Features Provider</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";
+        // cspell:words ldproxy strassen daraa
+        //Sandcastle_Begin
+        const viewer = new Cesium.Viewer("cesiumContainer");
+
+        // Finland API:
+        // Check out https://www.maanmittauslaitos.fi/en/rajapinnat/api-avaimen-ohje
+        // TODO: The total items seems to be in the `Content-Length` header instead of `numMatched` neither are in the spec
+        // TODO: The pagination is _only_ done using the `next` link, it does _not_ support `offset`
+        // TODO: The `f` query param is not supported, not standard either but will break this APi
+        const finlandApiKey = "51cc1662-dc71-458e-9df3-c3d421bf18ed";
+        const finlandGeoNamesProvider = {
+          id: "finland-places",
+          name: "Finland Geo Names (Points)",
+          baseUrl:
+            "https://avoin-paikkatieto.maanmittauslaitos.fi/geographic-names/features/v1",
+          queryParameters: {
+            "api-key": finlandApiKey,
+          },
+        };
+        const finlandTopographyProvider = {
+          id: "finland-topo",
+          name: "Finland Topography (Points, Lines, Areas)",
+          baseUrl:
+            "https://avoin-paikkatieto.maanmittauslaitos.fi/maastotiedot/features/v1",
+          queryParameters: {
+            "api-key": finlandApiKey,
+          },
+          // TODO: this _should_ work but it was failing for CORS issues so maybe not
+          // headers: {
+          //   Authorization: `Basic ${btoa(`${finlandApiKey}:`)}`,
+          // },
+        };
+
+        // ldproxy API:
+        const strassenProvider = {
+          id: "strassen",
+          name: "Strassen - German Roads (Points, Lines)",
+          baseUrl: "https://demo.ldproxy.net/strassen",
+          queryParameters: {
+            f: "json",
+          },
+        };
+        const vineyardProvider = {
+          id: "vinyard",
+          name: "Vinyards - Germany (Areas)",
+          baseUrl: "https://demo.ldproxy.net/vineyards",
+          queryParameters: {
+            f: "json",
+          },
+        };
+        const daraaProvider = {
+          id: "daraa",
+          name: "Daraa, Syria (Points, Lines, Areas)",
+          baseUrl: "https://demo.ldproxy.net/daraa",
+          queryParameters: {
+            f: "json",
+          },
+        };
+
+        // iTwin
+        const serviceResponse = await fetch("https://api.cesium.com/itwin/token");
+        const { access_token: token } = await serviceResponse.json();
+        Cesium.ITwinPlatform.defaultAccessToken = token;
+
+        const iTwinId = "04ba725f-f3c0-4f30-8014-a4488cbd612d";
+        const iTwinProvider = {
+          id: "iTwin",
+          name: "iTwin",
+          baseUrl: `https://api.bentley.com/geospatial-features/itwins/${iTwinId}/ogc`,
+          headers: {
+            Authorization: `Bearer ${Cesium.ITwinPlatform.defaultAccessToken}`,
+          },
+        };
+
+        const providers = [
+          strassenProvider,
+          vineyardProvider,
+          finlandGeoNamesProvider,
+          finlandTopographyProvider,
+          daraaProvider,
+          iTwinProvider,
+        ];
+        // const currentProvider = vineyardProvider;
+        // const collectionId = "vineyards";
+        const currentProvider = finlandGeoNamesProvider;
+        const collectionId = "placenames";
+
+        function drawRect(rect, outlineColor = Cesium.Color.RED) {
+          if (!rect) {
+            return;
+          }
+
+          const rectEntity = viewer.entities.add({
+            rectangle: {
+              coordinates: rect,
+              outline: true,
+              outlineColor: outlineColor,
+              height: 0,
+              //material: Cesium.Color.PINK.withAlpha(0.5),
+              material: Cesium.Color.TRANSPARENT,
+              //material: outlineColor.withAlpha(0.1),
+            },
+            show: true,
+          });
+          return rectEntity;
+        }
+
+        async function load() {
+          const provider = new Cesium.OgcFeatureProvider(
+            currentProvider.baseUrl,
+            collectionId,
+            {
+              limitPerRequest: 100,
+              maxItems: 500,
+              queryParameters: currentProvider.queryParameters,
+              headers: currentProvider.headers,
+            },
+          );
+
+          // TODO: this should be unnecessary in practice but wanted it for the debug rect
+          await provider.loadCollection();
+          drawRect(provider._bbox, Cesium.Color.LIME);
+
+          const layer = provider.createLayer();
+          layer.addToViewer(viewer);
+          viewer.scene.primitives.add(layer);
+
+          // const result = await provider.requestFeatures({
+          //   partialLoadCallback: (json) => {
+          //     layer.addGeoJson(json);
+          //     console.log("loaded", json);
+          //   },
+          // });
+          console.log(provider);
+          // layer.addGeoJson(result);
+          console.log(layer);
+
+          // TODO: for testing
+          window.provider = provider;
+          window.layer = layer;
+        }
+
+        load();
+
+        // TODO: for testing
+        window.cesiumViewer = viewer;
+
+        const cameraLocation1 = {
+          destination: new Cesium.Cartesian3(
+            4613880.621205927,
+            632201.8613040792,
+            5371788.821791057,
+          ),
+          orientation: new Cesium.HeadingPitchRoll(
+            1.7763568394002505e-15,
+            -1.5688199858388616,
+            0,
+          ),
+          duration: 0,
+          easingFunction: Cesium.EasingFunction.LINEAR_NONE,
+        };
+        viewer.scene.camera.flyTo(cameraLocation1);
+
+        //Sandcastle_End
+      };
+      if (typeof Cesium !== "undefined") {
+        window.startupCalled = true;
+        window.startup(Cesium).catch((error) => {
+          "use strict";
+          console.error(error);
+        });
+        Sandcastle.finishedLoading();
+      }
+    </script>
+  </body>
+</html>