Adding proof of concept for using a maplibre backend vs. OL

package.json

@@ -17,12 +17,14 @@
   "dependencies": {
     "@turf/boolean-within": "^7.2.0",
     "geojson": "^0.5.0",
+    "geotiff": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "jwt-encode": "^1.0.1",
+    "maplibre-gl": "^5.23.0",
     "ol": "^10.8.0",
     "ol-mapbox-style": "^13.4.0",
     "ol-pmtiles": "^2.0.2",
-    "pmtiles": "^4.4.0",
+    "pmtiles": "^4.4.1",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vuetify": "^3.9.5",

src/composables/useMapLibreCogProtocol.ts

@@ -0,0 +1,86 @@
+import maplibregl from 'maplibre-gl'
+import CogWorker from '../workers/cogWorker.ts?worker'
+
+type CogState = {
+  threshold: number
+}
+
+type CogSources = {
+  areaUrl: string
+  confidenceUrl: string
+}
+
+type PendingTile = {
+  resolve: (resp: { data: ArrayBuffer }) => void
+  reject: (err: Error) => void
+}
+
+const POOL_SIZE = Math.max(2, Math.min(6, (navigator.hardwareConcurrency || 4) - 1))
+
+let workers: Worker[] = []
+let rrIndex = 0
+let nextId = 0
+const pending = new Map<number, PendingTile>()
+
+function parseTileUrl(url: string): { z: number; x: number; y: number } | null {
+  const m = url.match(/cog:\/\/[^/]+\/(\d+)\/(\d+)\/(\d+)/)
+  if (!m) return null
+  return { z: Number(m[1]), x: Number(m[2]), y: Number(m[3]) }
+}
+
+function pickWorker(): Worker {
+  const w = workers[rrIndex]
+  rrIndex = (rrIndex + 1) % workers.length
+  return w
+}
+
+export function registerCogProtocol(sources: CogSources, state: CogState) {
+  for (const w of workers) w.terminate()
+  workers = []
+  for (let i = 0; i < POOL_SIZE; i++) {
+    const w = new CogWorker()
+    w.onmessage = (e: MessageEvent) => {
+      const { id, ok, data, error } = e.data as {
+        id: number
+        ok: boolean
+        data?: ArrayBuffer
+        error?: string
+      }
+      const p = pending.get(id)
+      if (!p) return
+      pending.delete(id)
+      if (ok && data) p.resolve({ data })
+      else p.reject(new Error(error ?? 'cog worker failed'))
+    }
+    w.postMessage({ type: 'init', sources })
+    workers.push(w)
+  }
+
+  maplibregl.addProtocol('cog', (params: { url: string }) => {
+    return new Promise<{ data: ArrayBuffer }>((resolve, reject) => {
+      const parsed = parseTileUrl(params.url)
+      if (!parsed || workers.length === 0) {
+        reject(new Error(`bad cog url or worker pool empty: ${params.url}`))
+        return
+      }
+      const id = nextId++
+      pending.set(id, { resolve, reject })
+      pickWorker().postMessage({
+        type: 'tile',
+        id,
+        z: parsed.z,
+        x: parsed.x,
+        y: parsed.y,
+        threshold: state.threshold,
+      })
+    })
+  })
+}
+
+export function unregisterCogProtocol() {
+  maplibregl.removeProtocol('cog')
+  for (const w of workers) w.terminate()
+  workers = []
+  for (const [, p] of pending) p.reject(new Error('cog protocol unregistered'))
+  pending.clear()
+}

src/router/index.ts

@@ -8,6 +8,11 @@ const router = createRouter({
       name: 'map',
       component: () => import('../views/MapView.vue'),
     },
+    {
+      path: '/maplibre',
+      name: 'maplibre',
+      component: () => import('../views/MapLibreGlobalView.vue'),
+    },
   ],
 })