@vcmap/core 6.2.0-rc.1 → 6.2.0-rc.3

package/src/panorama/panoramaTileProvider.ts

@@ -168,7 +168,7 @@ function createPanoramaResourceProvider(
   ): Promise<void> => {
     const { tile, resource } = request;
     const { type } = resource;
-    if (!tile.material.hasTexture(type)) {
+    if (!tile.hasResource(type)) {
       const { levelImages } = resource;
       const { tileCoordinate } = tile;
       const levelImage = levelImages[tileCoordinate.level - minLevel];
@@ -181,7 +181,7 @@ function createPanoramaResourceProvider(
             poolOrDecoder,
           );
 
-          tile.material.setTexture(
+          tile.setResource(
             type,
             resourceData.data as unknown as PanoramaResourceData<PanoramaResourceType>,
           );
@@ -257,17 +257,14 @@ function createPanoramaResourceProvider(
   const createOrUpdateQueue = (panoramaTile: PanoramaTile[]): void => {
     const newResources = panoramaTile.flatMap((tile) => {
       const resourceRequests: TileResourceRequest<PanoramaResourceType>[] = [];
-      if (!tile.material.hasTexture('rgb') && !loadingTiles.get(tile)?.rgb) {
+      if (!tile.hasResource('rgb') && !loadingTiles.get(tile)?.rgb) {
         resourceRequests.push({
           tile,
           resource: resources.rgb,
         });
       }
       if (resources.depth) {
-        if (
-          !tile.material.hasTexture('depth') &&
-          !loadingTiles.get(tile)?.depth
-        ) {
+        if (!tile.hasResource('depth') && !loadingTiles.get(tile)?.depth) {
           resourceRequests.push({
             tile,
             resource: resources.depth,
@@ -276,7 +273,7 @@ function createPanoramaResourceProvider(
       }
       if (showIntensity && resources.intensity) {
         if (
-          !tile.material.hasTexture('intensity') &&
+          !tile.hasResource('intensity') &&
           !loadingTiles.get(tile)?.intensity
         ) {
           resourceRequests.push({
@@ -329,7 +326,7 @@ function createPanoramaResourceProvider(
         throw new Error(`Resource type ${type} not found`);
       }
 
-      if (tile.material.hasTexture(type)) {
+      if (tile.hasResource(type)) {
         return Promise.resolve();
       }
 
@@ -447,7 +444,7 @@ export function createPanoramaTileProvider(
     const x = tileSize[0] - Math.floor((offsetX / width) * tileSize[0]);
     const y = Math.floor((offsetY / height) * tileSize[1]);
 
-    const depthValue = tile.material.getDepthAtPixel(x, y);
+    const depthValue = tile.getDepthAtPixel(x, y);
     if (depthValue) {
       return interpolateDepth(
         depthValue,

package/src/util/flight/flightRecorder.ts

@@ -0,0 +1,237 @@
+import type VcsApp from '../../vcsApp.js';
+import type Layer from '../../layer/layer.js';
+import CesiumMap from '../../map/cesiumMap.js';
+import CesiumTilesetLayer from '../../layer/cesiumTilesetLayer.js';
+import { type FlightPlayer } from './flightPlayer.js';
+
+export type FlightPathRecorderOptions = {
+  fps?: number;
+  highDefinition?: boolean;
+};
+
+async function getFlightFrames(
+  app: VcsApp,
+  player: FlightPlayer,
+  fps: number,
+  cancelToken: { cancelled: boolean },
+  maxNumberOfFrames = 100,
+): Promise<ImageBitmap[]> {
+  const scene = (app.maps.activeMap as CesiumMap).getScene()!;
+  const { canvas, globe } = scene;
+  let recordedTime = player.clock.currentTime - 1;
+  let numberOfFrames = Math.ceil(
+    (player.clock.endTime - player.clock.currentTime) * fps,
+  );
+  if (numberOfFrames > maxNumberOfFrames) {
+    numberOfFrames = maxNumberOfFrames;
+  }
+  const images = new Array<Promise<ImageBitmap>>(numberOfFrames);
+  const tilesetImpl = [...app.layers]
+    .filter(
+      (l: Layer): l is CesiumTilesetLayer =>
+        l instanceof CesiumTilesetLayer && l.active,
+    )
+    .flatMap((tileset) =>
+      tileset.getImplementationsForMap(app.maps.activeMap!),
+    );
+
+  const layerListeners = [
+    app.layers.stateChanged.addEventListener((layer) => {
+      if (layer instanceof CesiumTilesetLayer) {
+        const implementations = layer.getImplementationsForMap(
+          app.maps.activeMap!,
+        );
+        if (layer.active) {
+          tilesetImpl.push(...implementations);
+        } else {
+          implementations.forEach((impl) => {
+            tilesetImpl.splice(
+              tilesetImpl.findIndex((i) => i === impl),
+              1,
+            );
+          });
+        }
+      }
+    }),
+  ];
+
+  let currentFrame = 0;
+  await new Promise<void>((resolve) => {
+    const handler = scene.postRender.addEventListener(() => {
+      if (cancelToken.cancelled) {
+        handler();
+        return;
+      }
+
+      if (globe.tilesLoaded) {
+        if (tilesetImpl.some((impl) => !impl.cesium3DTileset?.tilesLoaded)) {
+          return;
+        }
+        if (player.clock.currentTime === recordedTime) {
+          return;
+        }
+
+        recordedTime = player.clock.currentTime;
+        images[currentFrame] = createImageBitmap(canvas);
+        if (player.clock.currentTime === player.clock.endTime) {
+          handler();
+          resolve();
+        }
+
+        let nextTick = player.clock.currentTime + 1 / fps;
+        if (nextTick >= player.clock.endTime) {
+          nextTick = player.clock.endTime;
+        }
+        player.goToTime(nextTick);
+        currentFrame += 1;
+        if (currentFrame >= numberOfFrames) {
+          handler();
+          resolve();
+        }
+      }
+    });
+  });
+
+  layerListeners.forEach((listener) => {
+    listener();
+  });
+
+  return Promise.all(images);
+}
+
+export function createFlightMovie(
+  app: VcsApp,
+  player: FlightPlayer,
+  options?: FlightPathRecorderOptions,
+): { start: () => Promise<Blob>; cancel: () => void } {
+  if (!(app.maps.activeMap instanceof CesiumMap)) {
+    throw new Error('No active Cesium map found');
+  }
+
+  const cancelToken = { cancelled: false };
+  const videoBitsPerSecond = options?.highDefinition ? 12000000 : 6000000;
+
+  const map = app.maps.activeMap;
+  const scene = map.getScene()!;
+  const { canvas } = scene;
+
+  const destinationCanvas = document.createElement('canvas');
+  destinationCanvas.width = canvas.width;
+  destinationCanvas.height = canvas.height;
+  const context = destinationCanvas.getContext('2d')!;
+
+  const stream = destinationCanvas.captureStream(options?.fps ?? 30);
+  const recorder = new MediaRecorder(stream, {
+    mimeType: 'video/webm',
+    videoBitsPerSecond,
+  });
+
+  const resetMapControls = app.maps.requestExclusiveMapControls(
+    { apiCalls: true, keyEvents: true, pointerEvents: true },
+    () => {},
+  );
+
+  const finished = new Promise<Blob>((resolve, reject) => {
+    const chunksBuffer: Blob[] = [];
+
+    recorder.ondataavailable = (event): void => {
+      if (event.data.size > 0) {
+        chunksBuffer.push(event.data);
+      }
+    };
+
+    recorder.onerror = reject;
+    recorder.onstop = (): void => {
+      if (cancelToken.cancelled) {
+        return;
+      }
+      resolve(new Blob(chunksBuffer, { type: 'video/webm' }));
+    };
+  });
+
+  const renderBuffer = (buffer: ImageBitmap[]): Promise<void> => {
+    let interval: ReturnType<typeof setInterval>;
+    const promise = new Promise<void>((resolve) => {
+      const frameDuration = 1000 / (options?.fps || 30);
+      let currentFrame = 0;
+      interval = setInterval(() => {
+        if (cancelToken.cancelled) {
+          resolve();
+        }
+        const image = buffer[currentFrame];
+        if (image) {
+          context.drawImage(image, 0, 0);
+          currentFrame += 1;
+          if (currentFrame >= buffer.length) {
+            resolve();
+          }
+        } else {
+          resolve();
+        }
+      }, frameDuration);
+    });
+
+    return promise
+      .then(() => {
+        clearInterval(interval);
+      })
+      .catch((err: unknown) => {
+        clearInterval(interval);
+        throw err;
+      });
+  };
+
+  const requestBuffer = async (): Promise<boolean> => {
+    const images = await getFlightFrames(
+      app,
+      player,
+      options?.fps ?? 30,
+      cancelToken,
+    );
+
+    map.getCesiumWidget()!.useDefaultRenderLoop = false;
+    if (recorder.state === 'paused') {
+      recorder.resume();
+    } else {
+      recorder.start();
+    }
+
+    await renderBuffer(images);
+    map.getCesiumWidget()!.useDefaultRenderLoop = true;
+    if (
+      player.clock.currentTime === player.clock.endTime ||
+      cancelToken.cancelled
+    ) {
+      return false;
+    }
+    recorder.pause();
+    recorder.requestData();
+    return true;
+  };
+
+  const reset = (): void => {
+    map.getCesiumWidget()!.useDefaultRenderLoop = true;
+    resetMapControls?.();
+  };
+
+  async function start(): Promise<Blob> {
+    let buffering = true;
+    while (buffering) {
+      // eslint-disable-next-line no-await-in-loop
+      buffering = await requestBuffer();
+    }
+    stream.getTracks().forEach((track) => {
+      track.stop();
+    });
+    reset();
+    return finished;
+  }
+
+  const cancel = (): void => {
+    cancelToken.cancelled = true;
+    reset();
+    recorder.stop();
+  };
+
+  return { start, cancel };
+}

package/src/util/mapCollection.ts

@@ -179,6 +179,10 @@ class MapCollection extends Collection<VcsMap> {
     return this._activeMap;
   }
 
+  get panoramaImageSelection(): PanoramaImageSelection {
+    return this._panoramaImageSelection;
+  }
+
   /**
    * The currently set HTML element in which to render the maps
    */

package/src/util/math.ts

@@ -2,9 +2,11 @@ import {
   Math as CesiumMath,
   Cartesian3,
   Cartographic,
+  Rectangle,
 } from '@vcmap-cesium/engine';
 import type { Coordinate } from 'ol/coordinate.js';
 import { getDistance as haversineDistance } from 'ol/sphere.js';
+import { type Extent, getBottomLeft, getTopRight } from 'ol/extent.js';
 import Projection from './projection.js';
 
 /**
@@ -177,6 +179,38 @@ export function cartesianToMercator(cartesian: Cartesian3): Coordinate {
   return Projection.wgs84ToMercator(wgs84);
 }
 
+export function mercatorExtentToRectangle(
+  extent: Extent,
+  result?: Rectangle,
+): Rectangle {
+  const bottomLeft = getBottomLeft(extent);
+  const topRight = getTopRight(extent);
+
+  Projection.mercatorToWgs84(bottomLeft, true);
+  Projection.mercatorToWgs84(topRight, true);
+
+  return Rectangle.fromDegrees(
+    bottomLeft[0],
+    bottomLeft[1],
+    topRight[0],
+    topRight[1],
+    result,
+  );
+}
+
+export function rectangleToMercatorExtent(rectangle: Rectangle): Extent {
+  const bottomLeft = Projection.wgs84ToMercator([
+    CesiumMath.toDegrees(rectangle.west),
+    CesiumMath.toDegrees(rectangle.south),
+  ]);
+  const topRight = Projection.wgs84ToMercator([
+    CesiumMath.toDegrees(rectangle.east),
+    CesiumMath.toDegrees(rectangle.north),
+  ]);
+
+  return [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
+}
+
 export function getMidPoint(p1: Coordinate, p2: Coordinate): Coordinate {
   const stride = p1.length;
   const output = new Array<number>(stride);

package/dist/src/panorama/panoramaImageCache.d.ts

@@ -1,8 +0,0 @@
-import LRUCache from 'ol/structs/LRUCache.js';
-import type { PanoramaImage } from './panoramaImage.js';
-/**
- * A specialized LRU cache
- */
-export declare class PanoramaImageCache extends LRUCache<Promise<PanoramaImage>> {
-    deleteOldest(): void;
-}

package/dist/src/panorama/panoramaImageCache.js

@@ -1,18 +0,0 @@
-import LRUCache from 'ol/structs/LRUCache.js';
-/**
- * A specialized LRU cache
- */
-export class PanoramaImageCache extends LRUCache {
-    deleteOldest() {
-        const entry = this.pop();
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        if (entry) {
-            entry
-                .then((image) => {
-                image.destroy();
-            })
-                .catch(() => { });
-        }
-    }
-}
-//# sourceMappingURL=panoramaImageCache.js.map

package/dist/src/panorama/panoramaImageCache.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"panoramaImageCache.js","sourceRoot":"","sources":["../../../src/panorama/panoramaImageCache.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAG9C;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,QAAgC;IACtE,YAAY;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,kEAAkE;QAClE,IAAI,KAAK,EAAE,CAAC;YACV,KAAK;iBACF,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;gBACd,KAAK,CAAC,OAAO,EAAE,CAAC;YAClB,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;CACF"}

package/src/panorama/panoramaImageCache.ts

@@ -1,19 +0,0 @@
-import LRUCache from 'ol/structs/LRUCache.js';
-import type { PanoramaImage } from './panoramaImage.js';
-
-/**
- * A specialized LRU cache
- */
-export class PanoramaImageCache extends LRUCache<Promise<PanoramaImage>> {
-  deleteOldest(): void {
-    const entry = this.pop();
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    if (entry) {
-      entry
-        .then((image) => {
-          image.destroy();
-        })
-        .catch(() => {});
-    }
-  }
-}