Particle Layer
Vector variable rendered as animated particle simulation layer
Example

import { Deck } from '@deck.gl/core';
import { ClipExtension } from '@deck.gl/extensions';
import * as WeatherLayers from 'weatherlayers-gl';
// load data
const image = await WeatherLayers.loadTextureData(url);
const deckgl = new Deck({
layers: [
new WeatherLayers.ParticleLayer({
id: 'particle',
// data properties
image: image,
bounds: [-180, -90, 180, 90],
extensions: [new ClipExtension()],
clipBounds: [-181, -85.051129, 181, 85.051129],
}),
],
});
Data Properties
See Data properties common for all layers.
Style Properties
See Style properties common for all layers.
numParticles
numParticles
Type: number, optional
Default: 5000
Number of the particles. The greater number of particles, the denser particle trails.
maxAge
maxAge
Type: number, optional
Default: 100
Max age of the particles in frames. The greater max age, the longer particle trails.
speedFactor
speedFactor
Type: number 0-1
, optional
Default: 1
Speed factor of the particles. The greater speed factor, the longer particle trails.
width
width
Type: number
, optional
Default: 1
Width of the line. See LineLayer getWidth.
color
color
Type: color [number, number, number, number?]
, optional
Default: [255, 255, 255]
Color of the line. See LineLayer getColor.
palette
palette
Type: color palette text or array, optional
Palette used to interpolate values to colors.
Formats:
text (
string
) - see Text format for detailsarray (
[number, PaletteColor][]
) -PaletteColor
is any object accepted by Chroma.js constructor
Last updated