feat(wms): Experimental ViewportLoader

modules/wms/src/index.ts

@@ -30,3 +30,7 @@ export {WMTSCapabilitiesLoader} from './wmts-capabilities-loader';
 export type {GeoJSON} from '@loaders.gl/schema';
 export type {GMLLoaderOptions} from './gml-loader';
 export {GMLLoader} from './gml-loader';
+
+// ViewportLoader (TBD - might move to @laoders.gl/tiles)
+export type {ViewportLoaderProps} from './lib/data-sources/viewport-loader';
+export {ViewportLoader} from './lib/data-sources/viewport-loader';

modules/wms/src/lib/data-sources/viewport-loader.ts

@@ -0,0 +1,88 @@
+// loaders.gl, MIT license
+
+import {ImageType} from '@loaders.gl/images';
+import {RequestScheduler} from '@loaders.gl/loader-utils';
+
+export type LoadableViewport = {
+  id: string;
+  width: number;
+  height: number;
+  bounds: [number, number, number, number];
+};
+
+export type ViewportLoaderProps<DataType = unknown> = {
+  id?: string;
+  viewports?: LoadableViewport[];
+  debounce?: number;
+  requestScheduler?: RequestScheduler;
+
+  onLoadViewport: (viewport: LoadableViewport) => DataType;
+  onViewportLoad: (viewport: LoadableViewport, data: DataType) => void;
+  onViewportUnload?: (viewport: LoadableViewport, data: DataType) => void;
+  // possible additional callbacks
+  // onViewportRemoved: (viewport: LoadableViewport)
+  // onViewportAdded: (viewport: LoadableViewport)
+  // onAllViewportsLoaded:
+};
+
+type ViewportData<DataType> = {
+  bounds: [number, number, number, number];
+  data: DataType;
+};
+
+export class ViewportLoader<DataType = ImageType> {
+  props: ViewportLoaderProps;
+  requestScheduler: RequestScheduler;
+  viewports: LoadableViewport[] = [];
+  loadedData: Record<string, ViewportData<DataType>> = {};
+  loadPromises: Record<string, Promise<any>> = {};
+
+  constructor(props: ViewportLoaderProps) {
+    this.props = props;
+    this.requestScheduler = props.requestScheduler || new RequestScheduler({});
+    this.setViewports(props.viewports || []);
+  }
+
+  setViewports(viewports: LoadableViewport[]): void {
+    // Drop any loadedData that are no longer relevant
+    for (const viewportId of Object.keys(this.loadedData)) {
+      if (!(viewportId in this.loadedData)) {
+        const loadedData = this.loadedData[viewportId];
+        delete this.loadedData[viewportId];
+        delete this.loadPromises[viewportId];
+        this.props.onViewportUnload?.(this.viewports[viewportId], loadedData);
+      }
+    }
+
+    for (const viewport of viewports) {
+      if (!this._viewportEqual(viewport, this.viewports[viewport.id])) {
+        this.loadPromises[viewport.id] = Promise.resolve(this.props.onLoadViewport(viewport));
+        this.loadPromises[viewport.id].then((data) => {
+          this.loadedData[viewport.id] = data;
+          delete this.loadPromises[viewport.id];
+          this.props.onViewportLoad(viewport, data);
+        });
+      }
+    }
+  }
+
+  /** returns the data that is available right now */
+  getDataForViewport(viewportId: string): DataType | null {
+    const loadedData = this.loadedData[viewportId];
+    return loadedData ? loadedData.data : null;
+  }
+
+  /** Compare 2 viewports (TODO - use EPSILON) */
+  protected _viewportEqual(viewport1: LoadableViewport, viewport2: LoadableViewport): boolean {
+    if (viewport1 !== viewport2) {
+      return false;
+    }
+    if (viewport1.id !== viewport2.id) {
+      return false;
+    }
+    if (viewport1.width !== viewport2.width || viewport1.height !== viewport2.height) {
+      return false;
+    }
+    return viewport1.bounds.every((bound, i) => bound === viewport2.bounds[i]);
+  }
+}

modules/wms/test/data-sources/viewport-loader.spec.ts

@@ -0,0 +1,25 @@
+// loaders.gl, MIT license
+
+import test from 'tape-promise/tape';
+
+import {ViewportLoader} from '@loaders.gl/wms';
+
+test.only('ViewportLoader', async (t) => {
+  let loaded = false;
+  const viewportLoader = new ViewportLoader<string>({
+    viewports: [{id: 'test-viewport', width: 256, height: 256, bounds: [30, 70, 35, 75]}],
+    onLoadViewport() {
+      return 'loaded';
+    },
+    onViewportLoad(viewport, data) {
+      t.equal(data, 'loaded', 'viewportLoader.onViewportLoaded() called correctly');
+      loaded = true;
+    }
+  });
+
+  t.ok(viewportLoader);
+
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  t.ok(loaded, 'loaded');
+  t.end();
+});

modules/wms/test/index.ts

@@ -14,3 +14,6 @@ import './gml/gml-loader.spec';
 
 // Services
 import './data-sources/wms-service.spec';
+
+// ViewportLoader
+import './data-sources/viewport-loader.spec';