Package detail

terriajs-tiff-imagery-provider

hongfaqiu1.2kMIT2.13.3-webpack5-3

Load GeoTIFF/COG(Cloud optimized GeoTIFF) on Cesium

cesium, geotiff, cog, webgl

readme

TIFFImageryProvider

Load GeoTIFF/COG(Cloud optimized GeoTIFF) on Cesium

gzip size npm latest version license

中文readme

CodeSandbox

Features

  • Three band rendering.
  • Multi mode color rendering.
  • Support identify TIFF value with cartographic position.
  • WebGL accelerated rendering.
  • Band calculation.
  • Support nearest neighbor and bilinear interpolation resampling methods.
  • [experimental] Support any projected TIFF .

Install

#npm
npm install --save tiff-imagery-provider

#yarn
yarn add tiff-imagery-provider

#pnpm
pnpm add tiff-imagery-provider

Usage

Basic

import { Viewer } from "cesium";
import TIFFImageryProvider from 'tiff-imagery-provider';

const cesiumViewer = new Viewer("cesiumContainer");

const provider = await TIFFImageryProvider.fromUrl('https://oin-hotosm.s3.amazonaws.com/56f9b5a963ebf4bc00074e70/0/56f9c2d42b67227a79b4faec.tif');

cesiumViewer.imageryLayers.addImageryProvider(provider);

You can also use the New keyword to create a new TIFFimageryProvider, which was deprecated after cesium@1.104+

const provider = new TIFFImageryProvider({
  url: YOUR_TIFF_URL,
});
provider.readyPromise.then(() => {
  cesiumViewer.imageryLayers.addImageryProvider(provider);
})

Experimental If TIFF's projection is not EPSG:4326 or EPSG:3857, you can pass the projFunc to handle the projection

import proj4 from 'proj4';

TIFFImageryProvider.fromUrl(YOUR_TIFF_URL, {
  projFunc: (code) => {
    if (code === 32760) {
      proj4.defs("EPSG:32760", "+proj=utm +zone=60 +south +datum=WGS84 +units=m +no_defs +type=crs");
      return {
        project: proj4("EPSG:4326", "EPSG:32760").forward,
        unproject: proj4("EPSG:4326", "EPSG:32760").inverse
      }
    }
  }
});

Band calculation

// NDVI
TIFFImageryProvider.fromUrl(YOUR_TIFF_URL, {
  renderOptions: {
    single: {
      colorScale: 'rainbow',
      domain: [-1, 1],
      expression: '(b1 - b2) / (b1 + b2)'
    }
  }
});

Custom colors

TIFFImageryProvider.fromUrl(YOUR_TIFF_URL, {
  renderOptions: {
    single: {
      "colors": [
        [1, "rgb(154, 206, 127)"],
        [2, "rgb(163, 214, 245)"],
        [3, "rgb(255, 251, 177)"],
        [4, "rgb(193, 114, 97)"],
        [5, "rgb(220, 100, 120)"],
        [6, "rgb(49, 173, 105)"]
      ],
      type: "discrete",
      useRealValue: true // use real value in colors stops
    }
  }
});

API

class TIFFImageryProvider {
  ready: boolean;
  readyPromise: Promise<void>
  bands: Record<number, {
    min: number;
    max: number;
  }>;
  origin: number[];
  reverseY: boolean;
  samples: number;
  constructor(options: TIFFImageryProviderOptions & {
    /** 
     * @deprecated 
     * Deprecated after cesium@1.104+, you can use fromUrl instead
     * @example 
     * const provider = await TIFFImageryProvider.fromUrl(url)
     */
    url?: string | File | Blob;
  });

  get isDestroyed(): boolean;
  destroy(): void;

  static fromUrl(url: string | File | Blob, options?: TIFFImageryProviderOptions): Promise<TIFFImageryProvider>;
}

interface TIFFImageryProviderOptions {
  requestOptions?: {
    /** defaults to false */
    forceXHR?: boolean;
    headers?: Record<string, any>;
    credentials?: boolean;
    /** defaults to 0 */
    maxRanges?: number;
    /** defaults to false */
    allowFullFile?: boolean;
    [key: string]: any;
  };
  credit?: string;
  tileSize?: number;
  maximumLevel?: number;
  minimumLevel?: number;
  enablePickFeatures?: boolean;
  hasAlphaChannel?: boolean;
  renderOptions?: TIFFImageryProviderRenderOptions;
  /**
   * If TIFF's projection is not EPSG:4326 or EPSG:3857, you can pass the ``projFunc`` to handle the projection
   * @experimental
   */
  projFunc?: (code: number) => {
    /** projection function, convert [lon, lat] position to [x, y] */
    project: ((pos: number[]) => number[]);
    /** unprojection function, convert [x, y] position to [lon, lat] */
    unproject: ((pos: number[]) => number[]);
  } | undefined;
  /** cache size, defaults to 100 */
  cacheSize?: number;
  /** resample web worker pool size, defaults to the number of CPUs available. When this parameter is `null` or 0, then the resampling will be done in the main thread. */
  workerPoolSize?: number;
}

type TIFFImageryProviderRenderOptions = {
  /** nodata value, default read from tiff meta */
  nodata?: number;
  /** Only valid for three band rendering, defaults to { 'black': 'transparent' } */
  colorMapping?: Record<string, string>;
  /** try to render multi band cog to RGB, priority 1 */
  convertToRGB?: boolean;
  /** priority 2 */
  multi?: MultiBandRenderOptions;
  /** priority 3 */
  single?: SingleBandRenderOptions;
  /** resample method, defaults to nearest */
  resampleMethod?: 'bilinear' | 'nearest';
}

interface SingleBandRenderOptions {
  /** band index start from 1, defaults to 1 */
  band?: number;

  /**
   * The color scale image to use.
   */
  colorScaleImage?: HTMLCanvasElement | HTMLImageElement;

  /**
   * The name of a named color scale to use.
   */
  colorScale?: ColorScaleNames;

  /** custom interpolate colors, [stopValue(0 - 1), color] or [color], if the latter, means equal distribution 
   * @example
   * [[0, 'red'], [0.6, 'green'], [1, 'blue']]
  */
  colors?: [number, string][] | string[];

  /** Determine whether to use the true value range for custom color ranges, defaults to false */
  useRealValue?: boolean;

  /** defaults to continuous */
  type?: 'continuous' | 'discrete';

  /**
   * The value domain to scale the color.
   */
  domain?: [number, number];

  /**
   * Range of values that will be rendered, values outside of the range will be transparent.
   */
  displayRange?: [number, number];

  /**
   * Set if displayRange should be used.
   */
  applyDisplayRange?: boolean;

  /**
   * Whether or not values below the domain shall be clamped.
   */
  clampLow?: boolean;

  /**
   * Whether or not values above the domain shall be clamped (if not defined defaults to clampLow value).
   */
  clampHigh?: boolean;

  /**
   * Sets a mathematical expression to be evaluated on the plot. Expression can contain mathematical operations with integer/float values, band identifiers or GLSL supported functions with a single parameter.
   * Supported mathematical operations are: add '+', subtract '-', multiply '*', divide '/', power '**', unary plus '+a', unary minus '-a'.
   * Useful GLSL functions are for example: radians, degrees, sin, asin, cos, acos, tan, atan, log2, log, sqrt, exp2, exp, abs, sign, floor, ceil, fract.
   * Don't forget to set the domain parameter!
   * @example 
   * '-2 * sin(3.1415 - b1) ** 2'
   * '(b1 - b2) / (b1 + b2)'
   */
  expression?: string;
}

interface MultiBandRenderOptions {
  /** Band value starts from 1 */
  r?: {
    band: number;
    min?: number;
    max?: number;
  };
  g?: {
    band: number;
    min?: number;
    max?: number;
  };
  b?: {
    band: number;
    min?: number;
    max?: number;
  };
}


/** see https://observablehq.com/@d3/color-schemes */
type ColorScaleNames = 'viridis' | 'inferno' | 'turbo' | 'rainbow' | 'jet' | 'hsv' | 'hot' | 'cool' | 'spring' | 'summer' | 'autumn' | 'winter' | 'bone' | 'copper' | 'greys' | 'ylgnbu' | 'greens' | 'ylorrd' | 'bluered' | 'rdbu' | 'picnic' | 'portland' | 'blackbody' | 'earth' | 'electric' | 'magma' | 'plasma' | 'redblue' | 'coolwarm' | 'diverging_1' | 'diverging_2' | 'blackwhite' | 'twilight' | 'twilight_shifted';

Demo

online Demo

  • Powered by Next.js.
  • Dark mode with Semi-UI.
  • Simple cog custom render method.

Launch the app in the demo folder, and then visit http://localhost:3000/

pnpm install
cd example
pnpm dev

screenshot.png | classify.png | landsat.png | ------- | ------- | -------- |

Plans

  • [x] GPU speed up calculation
  • [ ] More efficient tile request method

Credits

https://github.com/geotiffjs/geotiff.js

https://github.com/santilland/plotty

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

2.13.0 (2024-09-22)

Bug Fixes

  • bilinear resample dont handle nodata (6b1d709)

Features

  • optimize memory usage and improve performance (0a44295)

2.12.3 (2024-09-21)

Bug Fixes

  • single render dont request more than one band (575bdd9)

2.12.2 (2024-08-07)

Bug Fixes

  • #35 tentatively solved the boundary anomaly of the bilinear methods (bc4e481)

2.12.1 (2024-07-17)

Note: Version bump only for package root

2.12.0 (2024-07-17)

Features

  • bilinear resampling method (2aea3b1)

2.11.1 (2024-07-11)

Note: Version bump only for package root

2.11.0 (2024-07-09)

Features

2.10.7 (2024-07-03)

Bug Fixes

  • fix discrete rendering errors, 4 decimal places of render precision support (2006a62)

2.10.6 (2024-07-02)

Bug Fixes

  • discrete colorScale drawing error (1ced789)

2.10.5 (2024-04-03)

Bug Fixes

  • useRealValue with domain config (ca6fc2b)

2.10.4 (2024-03-14)

Bug Fixes

  • native tiff range request error (78ca47f)

2.10.3 (2024-03-13)

Bug Fixes

  • safari canvas.toDataUrl() error (1b0894f)

2.10.2 (2024-03-06)

Bug Fixes

  • compatible Safari (remove web-worker) (81ffe2d)

2.10.1 (2024-01-12)

Bug Fixes

  • remove console & update readme (7c6dcae)

2.10.0 (2024-01-12)

Bug Fixes

  • fix the issue of incomplete display across 180 degrees (64ef6ef)

Features

  • add useRealValue option (567861a)

2.9.6 (2023-11-20)

Bug Fixes

2.9.5 (2023-11-17)

Bug Fixes

2.9.4 (2023-11-07)

Bug Fixes

  • delete url options when use fromUrl (83de3e9)

2.9.3 (2023-11-07)

Bug Fixes

  • auto delete url in options when use fromUrl (f3e8908)

2.9.2 (2023-09-04)

Bug Fixes

  • multi band tiff single band rendering #20 (eb4a653)

2.9.1 (2023-09-04)

Bug Fixes

2.9.0 (2023-09-04)

Features

  • web based reprojection(but slow) (665de3a)

2.8.2 (2023-08-02)

Bug Fixes

  • account for different corner coordinates #16 (ed9e928)

2.8.1 (2023-07-31)

Performance Improvements

2.8.0 (2023-07-31)

Bug Fixes

  • demo: higher cesium version mistake (7392a20)

Features

2.7.0 (2023-07-04)

Bug Fixes

Features

2.6.7 (2023-07-03)

Bug Fixes

2.6.6 (2023-07-03)

Bug Fixes

  • fromUrl options defaults to undefined #17 (9fd81b3)

2.6.5 (2023-06-26)

Bug Fixes

  • error extend ImageryProvider (6d0cbe9)

2.6.4 (2023-06-26)

Performance Improvements

  • some uncertain modifications (a53c115)

2.6.3 (2023-06-21)

Performance Improvements

2.6.2 (2023-06-21)

Bug Fixes

2.6.1 (2023-06-21)

Bug Fixes

2.6.0 (2023-06-20)

Features

  • add fromUrl, support cesium@1.104+ #11 (8ce6a81)

2.5.0 (2023-06-20)

Features

  • some features and fixed (a6a37fa)

2.4.3 (2023-05-06)

Bug Fixes

  • display_range unavalible on expression #10 (de464e9)