Implement bounding volume computation on TileMatrixSet tiles

examples/cog-basic/package.json

@@ -11,9 +11,11 @@
   "dependencies": {
     "@deck.gl/core": "^9.2.5",
     "@deck.gl/layers": "^9.2.5",
+    "@deck.gl/geo-layers": "^9.2.5",
     "@deck.gl/mapbox": "^9.2.5",
     "@deck.gl/mesh-layers": "^9.2.5",
     "@developmentseed/deck.gl-cog": "workspace:^",
+    "@developmentseed/deck.gl-raster": "workspace:^",
     "geotiff": "^2.1.3",
     "maplibre-gl": "^5.0.0",
     "proj4": "^2.20.2",

examples/cog-basic/src/App.tsx

@@ -1,13 +1,22 @@
 import { useEffect, useState, useRef } from "react";
 import { Map, useControl, type MapRef } from "react-map-gl/maplibre";
+import type { Tileset2DProps } from "@deck.gl/geo-layers/dist/tileset-2d";
 import { MapboxOverlay } from "@deck.gl/mapbox";
+import { PathLayer } from "@deck.gl/layers";
 import type { DeckProps } from "@deck.gl/core";
+import { TileLayer, TileLayerProps } from "@deck.gl/geo-layers";
 import { fromUrl } from "geotiff";
 import type { GeoTIFF } from "geotiff";
-import { COGLayer } from "@developmentseed/deck.gl-cog";
+import { COGLayer, parseCOGTileMatrixSet } from "@developmentseed/deck.gl-cog";
+import {
+  RasterTileset2D,
+  TileMatrixSet,
+} from "@developmentseed/deck.gl-raster";
 import proj4 from "proj4";
 import "maplibre-gl/dist/maplibre-gl.css";
 
+window.proj4 = proj4;
+
 function DeckGLOverlay(props: DeckProps) {
   const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
   overlay.setProps(props);
@@ -74,6 +83,7 @@ const COG_URL =
 export default function App() {
   const mapRef = useRef<MapRef>(null);
   const [geotiff, setGeotiff] = useState<GeoTIFF | null>(null);
+  const [cogMetadata, setCogMetadata] = useState<TileMatrixSet | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [debug, setDebug] = useState(false);
@@ -88,10 +98,17 @@ export default function App() {
         setError(null);
 
         const tiff = await fromUrl(COG_URL);
+        window.tiff = tiff;
 
         if (mounted) {
           setGeotiff(tiff);
 
+          const m = await parseCOGTileMatrixSet(tiff);
+          console.log("COG TileMatrixSet:", m);
+          window.m = m;
+          setCogMetadata(m);
+          // window.cogMetadata = cogMetadata;d
+
           // Calculate bounds and fit to them
           const bounds = await getCogBounds(tiff);
           if (mapRef.current) {
@@ -120,17 +137,22 @@ export default function App() {
     };
   }, []);
 
-  const layers = geotiff
-    ? [
-        new COGLayer({
-          id: "cog-layer",
-          geotiff,
-          maxError: 0.125,
-          debug,
-          debugOpacity,
-        }),
-      ]
-    : [];
+  const layers =
+    geotiff && cogMetadata
+      ? [
+          // new COGLayer({
+          //   id: "cog-layer",
+          //   geotiff,
+          //   maxError: 0.125,
+          //   debug,
+          //   debugOpacity,
+          // }),
+          createTileLayer(cogMetadata, {
+            id: "raster-tile-layer",
+            data: geotiff,
+          }),
+        ]
+      : [];
 
   return (
     <div style={{ position: "relative", width: "100%", height: "100%" }}>
@@ -286,3 +308,63 @@ export default function App() {
     </div>
   );
 }
+
+function createTileLayer(metadata: TileMatrixSet, props: TileLayerProps) {
+  // Create a factory class that wraps COGTileset2D with the metadata
+  class RasterTilesetWrapper extends RasterTileset2D {
+    constructor(opts: Tileset2DProps) {
+      super(metadata, opts);
+    }
+  }
+
+  return new TileLayer({
+    ...props,
+    TilesetClass: RasterTilesetWrapper,
+    renderSubLayers: (props) => {
+      const { tile } = props;
+      console.log("Rendering tile:", tile);
+
+      // Get projected bounds from tile data
+      // getTileMetadata returns data that includes projectedBounds
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const projectedBounds = (tile as any)?.projectedBounds;
+
+      if (!projectedBounds || !metadata) {
+        return [];
+      }
+
+      // Project bounds from image CRS to WGS84
+      const { topLeft, topRight, bottomLeft, bottomRight } = projectedBounds;
+
+      const topLeftWgs84 = metadata.projectToWgs84(topLeft);
+      const topRightWgs84 = metadata.projectToWgs84(topRight);
+      const bottomRightWgs84 = metadata.projectToWgs84(bottomRight);
+      const bottomLeftWgs84 = metadata.projectToWgs84(bottomLeft);
+
+      // Create a closed path around the tile bounds
+      const path = [
+        topLeftWgs84,
+        topRightWgs84,
+        bottomRightWgs84,
+        bottomLeftWgs84,
+        topLeftWgs84, // Close the path
+      ];
+
+      console.log("Tile bounds path (WGS84):", path);
+
+      return [
+        new PathLayer({
+          id: `${tile.id}-bounds`,
+          data: [{ path }],
+          getPath: (d) => d.path,
+          getColor: [255, 0, 0, 255], // Red
+          getWidth: 2,
+          widthUnits: "pixels",
+          pickable: false,
+        }),
+      ];
+
+      // return null;
+    },
+  });
+}

packages/deck.gl-raster/package.json

@@ -59,6 +59,7 @@
   },
   "dependencies": {
     "@developmentseed/raster-reproject": "workspace:^",
+    "@math.gl/core": "^4.1.0",
     "@math.gl/culling": "^4.1.0"
   },
   "volta": {

packages/deck.gl-raster/src/index.ts

@@ -1,3 +1,4 @@
 export { RasterLayer } from "./raster-layer.js";
 export type { RasterLayerProps } from "./raster-layer.js";
-export type { TileMatrixSet, TileMatrix } from "./raster-tileset/types.js";
+export { RasterTileset2D } from "./raster-tileset/index.js";
+export type { TileMatrix, TileMatrixSet } from "./raster-tileset/types.js";

packages/deck.gl-raster/src/raster-tileset/index.ts

@@ -0,0 +1,2 @@
+export { RasterTileset2D } from "./raster-tileset-2d.js";
+export type { TileMatrix, TileMatrixSet } from "./types.js";