@kylebarron/deck.gl-extended-layers v0.2.0
deck.gl-extended-layers
A collection of custom Deck.gl layers
Overview
Deck.gl is a great geospatial rendering engine for the browser. Deck.gl layers are designed to be composable and easy to extend. As such, small variations of the pre-built layers can do amazing new things, while not being fit for inclusion in the standard layer library.
This repository is a handful of custom layers I've created for my own use, which I've put into a single repository.
Install
yarn add @kylebarron/deck.gl-extended-layers
Layers
BandsBitmapLayer
This is a subclass of the BitmapLayer
from the Deck.gl standard library to
enable image operations on individual satellite image bands. You can combine RGB
bands in true color or false color manners, or run a simple calculation and
apply a colormap. With true color imagery, you can optionally apply
pansharpening on the GPU. This layer allows for image bands to be requested and
loaded in parallel, which can sometimes speed up image loading.
Props
Images:
Images to render in the layer. All of these must be passed to the class as Texture2D
objects.
image_r
: (Texture2D
) Image corresponding to the red band.image_g
: (Texture2D
) Image corresponding to the green band.image_b
: (Texture2D
) Image corresponding to the blue band. Required whenband_combination
isrgb
orevi
.image_pan
: (Texture2D
) Optional. Image corresponding to the pansharpening band. Will be ignored if not provided or ifusePan
isfalse
.colormap
: (Texture2D
) Required whenband_combination
is anything other thanrgb
. Not used whenband_combination
isrgb
. Many colormaps are inassets/colormaps
in PNG format, derived from Matplotlib andrio-tiler
.To use them, you can use the jsdelivr CDN, e.g.:
https://cdn.jsdelivr.net/gh/kylebarron/deck.gl-extended-layers/assets/colormaps/{colormap_name}.png
To visualize them, see colormap documentation from rio-tiler.
Band options:
band_combination
: (String
) Method of combining bands. Must be one of the following. Default isrgb
. Any option other thanrgb
must provide acolormap
texture.rgb
: Combinesimage_r
,image_g
, andimage_b
on the GPU in that order. If you pass red, green, and blue bands, a true color image will be rendered. You can alternatively pass other band combinations to create false color images.normalized_difference
: Computes the normalized difference of two bands:(x - y) / (x + y)
.normalized_difference
always usesimage_r
andimage_g
in that order (asx
andy
). It then applies thecolormap
texture to the output. Other bands are ignored.To create the Normalized difference vegetation index (NDVI), for example, you would pass the near-infrared band as
image_r
and the red band asimage_g
.evi
: Computes the Enhanced Vegetation Index (EVI). Layers must be passed as near-infrared, red, and blue asimage_r
,image_g
andimage_b
, respectively.savi
: Computes the Soil Adjusted Vegetation Index (SAVI). Layers must be passed as near-infrared and red asimage_r
andimage_g
, respectively.msavi
: Computes the Modified Soil Adjusted Vegetation Index (MSAVI). Layers must be passed as near-infrared and red asimage_r
andimage_g
, respectively.
panWeight
: (Number
). Weight of blue band when pansharpening. Default:0.2
usePan
: (Boolean
) Optionally turn off pansharpening. Useful for false-color RGB combinations. This is automatically off for non-RGB band combinations. Ifimage_pan
is not provided, this is ignored.
BitmapLayer
options
These options are the same as the normal deck.gl BitmapLayer
options.
bounds
desaturate
transparentColor
tintColor
BandsSimpleMeshLayer
This is a subclass of the SimpleMeshLayer
that accepts three or four separate
image bands (a fourth band is the panchromatic band, to sharpen other bands).
This is designed to have the benefits of the BandsBitmapLayer
described above,
but used to render 3D terrain on a terrain mesh.
This layer is still undocumented and does not accept all the options described
above for the BandsBitmapLayer
. Look at the defaultProps
in the code to see
how to use this.