@gisatcz/deckgl-geolib 1.10.1-dev.1 → 1.10.2-dev.0

package/src/cogterrainlayer/CogTerrainLayer.ts

@@ -1,79 +1,204 @@
-import { CompositeLayer } from '@deck.gl/core';
-import { TileLayer, TerrainLayer } from '@deck.gl/geo-layers';
-import chroma from 'chroma-js';
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {
+  Color,
+  CompositeLayer,
+  CompositeLayerProps,
+  DefaultProps,
+  Layer,
+  LayersList,
+  log,
+  Material,
+  TextureSource,
+  UpdateParameters,
+  COORDINATE_SYSTEM,
+} from '@deck.gl/core';
+import { SimpleMeshLayer } from '@deck.gl/mesh-layers';
+import type { MeshAttributes } from '@loaders.gl/schema';
+// import { TerrainWorkerLoader } from '@loaders.gl/terrain';
+import {
+  TileLayer, TileLayerProps, GeoBoundingBox, _TileLoadProps as TileLoadProps,
+  _Tile2DHeader as Tile2DHeader, _getURLFromTemplate as getURLFromTemplate, NonGeoBoundingBox,
+} from '@deck.gl/geo-layers';
+
+import { GeoImageOptions } from '../geoimage/geoimage.ts';
 
-// FIXME
-// eslint-disable-next-line
-import { getTileUrl, isCogUrl, isTileServiceUrl } from '../utilities/tileurls.ts';
 import CogTiles from '../cogtiles/cogtiles.ts';
 
-import { GeoImageOptions, DefaultGeoImageOptions } from '../geoimage/geoimage.ts';
+export type Bounds = [minX: number, minY: number, maxX: number, maxY: number];
 
-class CogTerrainLayer extends CompositeLayer<any> {
-  static layerName = 'CogTerrainLayer';
+export type TileBoundingBox = NonGeoBoundingBox | GeoBoundingBox;
 
-  terrainCogTiles: CogTiles;
+export type ZRange = [minZ: number, maxZ: number];
 
-  bitmapCogTiles: CogTiles;
+export type URLTemplate = string | string[] | null;
 
-  tileSize: number;
+export const urlType = {
+  type: 'object' as const,
+  value: null as URLTemplate,
+  validate: (value, propType) => (propType.optional && value === null)
+    || typeof value === 'string'
+    || (Array.isArray(value) && value.every((url) => typeof url === 'string')),
+  equal: (value1, value2) => {
+    if (value1 === value2) {
+      return true;
+    }
+    if (!Array.isArray(value1) || !Array.isArray(value2)) {
+      return false;
+    }
+    const len = value1.length;
+    if (len !== value2.length) {
+      return false;
+    }
+    for (let i = 0; i < len; i++) {
+      if (value1[i] !== value2[i]) {
+        return false;
+      }
+    }
+    return true;
+  },
+};
+
+const DUMMY_DATA = [1];
+
+const defaultProps: DefaultProps<TerrainLayerProps> = {
+  ...TileLayer.defaultProps,
+  // Image url that encodes height data
+  elevationData: urlType,
+  // Image url to use as texture
+  texture: { ...urlType, optional: true },
+  // Martini error tolerance in meters, smaller number -> more detailed mesh
+  meshMaxError: { type: 'number', value: 4.0 },
+  // Bounding box of the terrain image, [minX, minY, maxX, maxY] in world coordinates
+  bounds: {
+    type: 'array', value: null, optional: true, compare: true,
+  },
+  // Color to use if texture is unavailable
+  color: { type: 'color', value: [255, 255, 255] },
+  // Object to decode height data, from (r, g, b) to height in meters
+  elevationDecoder: {
+	  type: 'object',
+	  value: {
+      rScaler: 1,
+      gScaler: 0,
+      bScaler: 0,
+      offset: 0,
+	  },
+  },
+  // Supply url to local terrain worker bundle. Only required if running offline and cannot access CDN.
+  workerUrl: '',
+  // Same as SimpleMeshLayer wireframe
+  wireframe: false,
+  material: true,
+
+  // loaders: [TerrainLoader],
+};
+
+// Turns array of templates into a single string to work around shallow change
+function urlTemplateToUpdateTrigger(template: URLTemplate): string {
+  if (Array.isArray(template)) {
+	  return template.join(';');
+  }
+  return template || '';
+}
 
-  minZoom: number;
+  type ElevationDecoder = {rScaler: number; gScaler: number; bScaler: number; offset: number};
+  type TerrainLoadProps = {
+	bounds: Bounds;
+	elevationData: string | null;
+	elevationDecoder: ElevationDecoder;
+	meshMaxError: number;
+	signal?: AbortSignal;
+  };
 
-  maxZoom: number;
+  type MeshAndTexture = [MeshAttributes | null, TextureSource | null];
 
-  bitmapUrl: string;
+/** All properties supported by TerrainLayer */
+export type TerrainLayerProps = _TerrainLayerProps &
+	TileLayerProps<MeshAndTexture> &
+	CompositeLayerProps;
 
-  urlType: 'none' | 'tile' | 'cog' = 'none';
+  /** Props added by the TerrainLayer */
+  type _TerrainLayerProps = {
+	/** Image url that encodes height data. * */
+	elevationData: URLTemplate;
 
-  id = '';
+	/** Image url to use as texture. * */
+	texture?: URLTemplate;
 
-  terrainUrl: string;
+	/** Martini error tolerance in meters, smaller number -> more detailed mesh. * */
+	meshMaxError?: number;
 
-  terrainOpacity: number;
+	/** Bounding box of the terrain image, [minX, minY, maxX, maxY] in world coordinates. * */
+	bounds?: Bounds | null;
 
-  terrainColor: Array<number>;
+	/** Color to use if texture is unavailable. * */
+	color?: Color;
 
-  terrainSkirtHeight: number;
+	/** Object to decode height data, from (r, g, b) to height in meters. * */
+	elevationDecoder?: ElevationDecoder;
 
-  static displayName: string;
+	/** Whether to render the mesh in wireframe mode. * */
+	wireframe?: boolean;
 
-  constructor(
-    id:string,
-    terrainUrl: string,
-    terrainOptions: GeoImageOptions,
-    bitmapUrl?: string,
-    bitmapOptions?: GeoImageOptions,
-  ) {
-    super({});
-    this.id = id;
-    const mergedTerrainOptions = { ...DefaultGeoImageOptions, ...terrainOptions };
-    this.terrainOpacity = mergedTerrainOptions.alpha / 100;
-    this.terrainColor = chroma(mergedTerrainOptions.terrainColor.slice(0, 3)).rgb();
-    this.terrainSkirtHeight = mergedTerrainOptions.terrainSkirtHeight;
-
-    if (bitmapUrl) {
-      if (isTileServiceUrl(bitmapUrl)) {
-        this.bitmapUrl = bitmapUrl;
-        this.urlType = 'tile';
-        this.terrainColor = [0, 0, 0, 0];
-      } else if (isCogUrl(bitmapUrl)) {
-        this.bitmapCogTiles = new CogTiles(bitmapOptions!);
-        this.bitmapCogTiles.initializeCog(bitmapUrl);
-        this.urlType = 'cog';
-        this.terrainColor = [0, 0, 0, 0];
-      } else {
-        console.warn('URL needs to point to a valid cog file, or needs to be in the {x}{y}{z} format.');
-      }
-    }
+	/** Material props for lighting effect. * */
+	material?: Material;
+
+	/**
+	 * @deprecated Use `loadOptions.terrain.workerUrl` instead
+	 */
+	workerUrl?: string;
+  };
+
+/** Render mesh surfaces from height map images. */
+export default class TerrainLayer<ExtraPropsT extends {} = {}> extends CompositeLayer<
+	ExtraPropsT & Required<_TerrainLayerProps & Required<TileLayerProps<MeshAndTexture>>>
+  > {
+  static defaultProps = defaultProps;
+
+  static layerName = 'TerrainLayer';
+
+  terrainCogTiles: CogTiles;
+
+  terrainUrl: string;
+
+  minZoom: number;
+
+  maxZoom: number;
+
+  state!: {
+	  isTiled?: boolean;
+	  terrain?: MeshAttributes;
+	  zRange?: ZRange | null;
+	};
+
+  constructor(props: TerrainLayerProps & ExtraPropsT, terrainOptions: GeoImageOptions) {
+    super(props);
+    console.log('xxx_terrainOptions', terrainOptions);
 
     this.terrainCogTiles = new CogTiles(terrainOptions);
-    // this.init(terrainUrl);
-    this.terrainUrl = terrainUrl;
   }
 
-  async initializeState() {
-    super.initializeState();
+  async initializeState(context: any) {
+    super.initializeState(context);
     this.setState({
       initialized: false,
     });
@@ -81,118 +206,299 @@ class CogTerrainLayer extends CompositeLayer<any> {
     await this.init(this.terrainUrl);
   }
 
-  shouldUpdateState() {
-    if (this.internalState?.subLayers.length === 0) {
-      return true;
-    }
-    return false;
-  }
-
   async init(terrainUrl: string) {
-    // console.log("LAYER INITIALIZE STATE");
+    console.log('xxx_LAYER INITIALIZE STATE');
 
-    const cog = await this.terrainCogTiles.initializeCog(terrainUrl);
-    this.tileSize = this.terrainCogTiles.getTileSize(cog);
+    const cog = await this.terrainCogTiles.initializeCog(this.props.elevationData);
+    console.log('xxx_LAYER INITIALIZE STATE', cog);
+    // this.tileSize = this.terrainCogTiles.getTileSize(cog);
 
     const zoomRange = this.terrainCogTiles.getZoomRange(cog);
-    [this.props.minZoom, this.props.maxZoom] = zoomRange;
+    console.log('xxx_LAYER INITIALIZE STATE', zoomRange);
+    [this.minZoom, this.maxZoom] = zoomRange;
 
     this.setState({ initialized: true });
   }
 
-  renderLayers() {
-    if (this.terrainCogTiles.cog) {
-    // console.log("LAYER RENDER");
-
-      let bitmapTile: string;
-      // let zoomOffset = 0
-
-      switch (this.urlType) {
-        case 'tile':
-        // zoomOffset = 0
-          break;
-        case 'cog':
-        // zoomOffset = -2
-          break;
-        default:
-      }
-      // console.log("is fully loaded: " + loaded);
-      const layer = new TileLayer({
-        id: `${this.id}-${String(performance.now())}`,
-        zoomOffset: -1,
-        getTileData: (tileData: any) => this.terrainCogTiles.getTile(
-          tileData.index.x,
-          tileData.index.y,
-          tileData.index.z,
-        ),
-        minZoom: this.minZoom,
-        maxZoom: this.maxZoom,
-        tileSize: this.tileSize,
-        maxRequests: 6,
-        refinementStrategy: 'best-available',
-        extent: this.terrainCogTiles.getBoundsAsLatLon(this.terrainCogTiles.cog),
-
-        renderSubLayers: (props: any) => {
-          if (props.data && (props.tile.index.x !== undefined)) {
-            switch (this.urlType) {
-              case 'tile':
-                bitmapTile = getTileUrl(
-                  this.bitmapUrl,
-                  props.tile.index.x,
-                  props.tile.index.y,
-                  props.tile.index.z,
-                );
-                break;
-              case 'cog':
-                bitmapTile = this.bitmapCogTiles.getTile(
-                  props.tile.index.x,
-                  props.tile.index.y,
-                  props.tile.index.z,
-                );
-                break;
-              default:
-                bitmapTile = null;
-            }
-
-            return new TerrainLayer({
-              id: (`terrain-${props.tile.index.x}-${props.tile.index.y}-${props.tile.index.z}`),
-              pickable: true,
-              elevationDecoder: {
-                rScaler: 6553.6,
-                gScaler: 25.6,
-                bScaler: 0.1,
-                offset: -10000,
-              },
-              elevationData: props.data,
-              texture: bitmapTile,
-              opacity: this.terrainOpacity,
-              bounds: [props.tile.bbox.west,
-                props.tile.bbox.south,
-                props.tile.bbox.east,
-                props.tile.bbox.north,
-              ],
-              color: this.terrainColor,
-              operation: 'terrain+draw',
-              minZoom: this.minZoom,
-              maxZoom: this.maxZoom,
-              loadOptions: {
-                terrain: {
-                  skirtHeight: this.terrainSkirtHeight,
-                  tesselator: 'martini',
-                },
-              },
-              meshMaxError: 12,
-            });
-          }
-          return null;
-        },
-      });
-      return [layer];
-    }
-    return [];
+  updateState({ props, oldProps }: UpdateParameters<this>): void {
+	  const elevationDataChanged = props.elevationData !== oldProps.elevationData;
+	  if (elevationDataChanged) {
+      const { elevationData } = props;
+      const isTiled = elevationData
+		  && (Array.isArray(elevationData)
+			|| (elevationData.includes('{x}') && elevationData.includes('{y}'))) || this.props.isTiled;
+      this.setState({ isTiled });
+	  }
+
+	  // Reloading for single terrain mesh
+	  const shouldReload = elevationDataChanged
+		|| props.meshMaxError !== oldProps.meshMaxError
+		|| props.elevationDecoder !== oldProps.elevationDecoder
+		|| props.bounds !== oldProps.bounds;
+
+	  if (!this.state.isTiled && shouldReload) {
+      // When state.isTiled, elevationData cannot be an array
+      const terrain = this.loadTerrain(props as TerrainLoadProps);
+      this.setState({ terrain });
+	  }
+
+	  // TODO - remove in v9
+	  // @ts-ignore
+	  if (props.workerUrl) {
+      log.removed('workerUrl', 'loadOptions.terrain.workerUrl')();
+	  }
   }
-}
 
-CogTerrainLayer.displayName = 'CogTerrainLayer';
+  loadTerrain({
+	  elevationData,
+	  bounds,
+	  elevationDecoder,
+	  meshMaxError,
+	  signal,
+  }: TerrainLoadProps): Promise<MeshAttributes> | null {
+	  if (!elevationData) {
+      return null;
+	  }
+	  let loadOptions = this.getLoadOptions();
+	  loadOptions = {
+      ...loadOptions,
+      _workerType: 'test',
+      terrain: {
+		  skirtHeight: this.state.isTiled ? meshMaxError * 2 : 0,
+		  ...loadOptions?.terrain,
+		  bounds,
+		  meshMaxError,
+		  elevationDecoder,
+      },
+	  };
+	  const { fetch } = this.props;
+    console.log('xxx_loaddata');
+
+	  return fetch(elevationData, {
+      propName: 'elevationData', layer: this, loadOptions, signal,
+    });
+  }
+  // OLD version
+  // getTiledTerrainData(tile: TileLoadProps): Promise<MeshAndTexture> {
+  //   const {
+  //     elevationData, fetch, texture, elevationDecoder, meshMaxError,
+  //   } = this.props;
+  //   const { viewport } = this.context;
+  //   const dataUrl = getURLFromTemplate(elevationData, tile);
+  //   const textureUrl = texture && getURLFromTemplate(texture, tile);
+
+  //   const { signal } = tile;
+  //   let bottomLeft = [0, 0] as [number, number];
+  //   let topRight = [0, 0] as [number, number];
+  //   if (viewport.isGeospatial) {
+  //     const bbox = tile.bbox as GeoBoundingBox;
+  //     bottomLeft = viewport.projectFlat([bbox.west, bbox.south]);
+  //     topRight = viewport.projectFlat([bbox.east, bbox.north]);
+  //   } else {
+  //     const bbox = tile.bbox as Exclude<TileBoundingBox, GeoBoundingBox>;
+  //     bottomLeft = [bbox.left, bbox.bottom];
+  //     topRight = [bbox.right, bbox.top];
+  //   }
+  //   const bounds: Bounds = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
+
+  //   const terrain = this.loadTerrain({
+  //     elevationData: dataUrl,
+  //     bounds,
+  //     elevationDecoder,
+  //     meshMaxError,
+  //     signal,
+  //   });
+  //   const surface = textureUrl
+  //     ? // If surface image fails to load, the tile should still be displayed
+  // 	  fetch(textureUrl, {
+  //       propName: 'texture', layer: this, loaders: [], signal,
+  //     }).catch((_) => null)
+  //     : Promise.resolve(null);
+
+  //   return Promise.all([terrain, surface]);
+  // }
+  async getTiledTerrainData(tile: TileLoadProps): Promise<MeshAndTexture> {
+	  const {
+      elevationData, fetch, texture, elevationDecoder, meshMaxError,
+    } = this.props;
+	  const { viewport } = this.context;
+	  // const dataUrl = getURLFromTemplate(elevationData, tile);
+	  // const textureUrl = texture && getURLFromTemplate(texture, tile);
+
+	  const { signal } = tile;
+	  let bottomLeft = [0, 0] as [number, number];
+	  let topRight = [0, 0] as [number, number];
+	  if (viewport.isGeospatial) {
+      const bbox = tile.bbox as GeoBoundingBox;
+      console.log('xxx_coords', bbox.west, bbox.south, bbox.east, bbox.north);
+
+      bottomLeft = viewport.projectFlat([bbox.west, bbox.south]);
+      topRight = viewport.projectFlat([bbox.east, bbox.north]);
+	  } else {
+      const bbox = tile.bbox as Exclude<TileBoundingBox, GeoBoundingBox>;
+      bottomLeft = [bbox.left, bbox.bottom];
+      topRight = [bbox.right, bbox.top];
+	  }
+	  const bounds: Bounds = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
+	  // const bounds: Bounds = [0, 100, 100, 100];
+	  // const bounds: Bounds = [tile.bbox.west, tile.bbox.south, tile.bbox.east, tile.bbox.north];
+
+    const terrain = await this.terrainCogTiles.getTile(
+      tile.index.x,
+      tile.index.y,
+      tile.index.z,
+      bounds,
+    );
+    console.log(
+      'xxx_TILE',
+      terrain,
+      bounds,
+    );
+
+	  // const terrain = this.loadTerrain({
+    //   elevationData: dataUrl,
+    //   bounds,
+    //   elevationDecoder,
+    //   meshMaxError,
+    //   signal,
+	  // });
+
+	  return Promise.all([terrain]);
+  }
+
+  renderSubLayers(
+	  props: TileLayerProps<MeshAndTexture> & {
+		id: string;
+		data: MeshAndTexture;
+		tile: Tile2DHeader<MeshAndTexture>;
+	  },
+  ) {
+	  const SubLayerClass = this.getSubLayerClass('mesh', SimpleMeshLayer);
+
+	  const { color, wireframe, material } = this.props;
+	  const { data } = props;
+
+	  if (!data) {
+      return null;
+	  }
+
+	  // const [mesh, texture] = data;
+	  const [mesh] = data;
+
+	  return new SubLayerClass({ ...props, tileSize: 256 }, {
+      data: DUMMY_DATA,
+      mesh,
+      // texture,
+      _instanced: false,
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      getPosition: (d) => [0, 0, 0],
+      getColor: color,
+      wireframe,
+      material,
+	  });
+  }
 
-export default CogTerrainLayer;
+  // Update zRange of viewport
+  onViewportLoad(tiles?: Tile2DHeader<MeshAndTexture>[]): void {
+	  if (!tiles) {
+      return;
+	  }
+
+	  const { zRange } = this.state;
+	  const ranges = tiles
+      .map((tile) => tile.content)
+      .filter((x) => x && x[0])
+      .map((arr) => {
+		  // @ts-ignore
+		  const bounds = arr[0]?.header?.boundingBox;
+		  return bounds?.map((bound) => bound[2]);
+      });
+	  if (ranges.length === 0) {
+      return;
+	  }
+	  const minZ = Math.min(...ranges.map((x) => x[0]));
+	  const maxZ = Math.max(...ranges.map((x) => x[1]));
+    console.log('xxx_ranges', ranges);
+	  if (!zRange || minZ < zRange[0] || maxZ > zRange[1]) {
+      this.setState({ zRange: [Number.isFinite(minZ) ? minZ : 0, Number.isFinite(maxZ) ? maxZ : 0] });
+	  }
+  }
+
+  renderLayers(): Layer | null | LayersList {
+	  const {
+      color,
+      material,
+      elevationData,
+      texture,
+      wireframe,
+      meshMaxError,
+      elevationDecoder,
+      tileSize,
+      maxZoom,
+      minZoom,
+      extent,
+      maxRequests,
+      onTileLoad,
+      onTileUnload,
+      onTileError,
+      maxCacheSize,
+      maxCacheByteSize,
+      refinementStrategy,
+	  } = this.props;
+    console.log('xxx_renderLayers', this.state.initialized);
+
+	  if (this.state.isTiled && this.state.initialized) {
+      return new TileLayer<MeshAndTexture>(
+		  this.getSubLayerProps({
+          id: 'tiles',
+		  }),
+		  {
+          getTileData: this.getTiledTerrainData.bind(this),
+          renderSubLayers: this.renderSubLayers.bind(this),
+          updateTriggers: {
+			      getTileData: {
+              elevationData: urlTemplateToUpdateTrigger(elevationData),
+              // texture: urlTemplateToUpdateTrigger(texture),
+              meshMaxError,
+              elevationDecoder,
+			      },
+          },
+          onViewportLoad: this.onViewportLoad.bind(this),
+          zRange: this.state.zRange || null,
+          tileSize,
+          maxZoom,
+          minZoom,
+          extent,
+          maxRequests,
+          onTileLoad,
+          onTileUnload,
+          onTileError,
+          maxCacheSize,
+          maxCacheByteSize,
+          refinementStrategy,
+		  },
+      );
+	  }
+
+	  // if (!elevationData) {
+    //   return null;
+	  // }
+
+	  // const SubLayerClass = this.getSubLayerClass('mesh', SimpleMeshLayer);
+	  // return new SubLayerClass(
+    //   this.getSubLayerProps({
+    //   id: 'mesh',
+    //   }),
+    //   {
+    //   data: DUMMY_DATA,
+    //   mesh: this.state.terrain,
+    //   texture,
+    //   _instanced: false,
+    //   getPosition: (d) => [0, 0, 0],
+    //   getColor: color,
+    //   material,
+    //   wireframe,
+    //   },
+	  // );
+  }
+}