WindLayer

Example

Example Source Code

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbTiandituLayer } from '@mapbox-react/core'
import { MbWindLayer } from '@mapbox-react/env-layers'

const App = () => {
  const [mapCenter] = useState([116, 39])
  const [zoom, setZoom] = useState(3)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbWindLayer
          image="https://mapbox-web.github.io/mapbox-react/wind/2016112200.png"
          windMin={[-21.32, -21.57]}
          windMax={[26.8, 21.42]}
          windRange={[360, 170]}
          windOrigin={[0, 85]}
          windRes={1}
        />
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
image	URL of the image	string	-
windMax	Maximum wind values (e.g., [u, v])	number[]	-
windMin	Minimum wind values (e.g., [u, v])	number[]	-
windOrigin	Origin of the wind data (e.g., [x, y] coordinates)	number[]	-
windRange	Range of wind values (e.g., [[minU, minV], [maxU, maxV]]) or [min, max]	number[]	-
windRes	Resolution of the wind data (e.g., [width, height] or [xRes, yRes])	number[]	-
dropRate	Rate at which particles are dropped/spawned	number	0.003
dropRateBump	Increase in the drop rate (e.g., for bursts or changes)	number	0.01
fadeOpacity	Rate at which particle opacity fades over time (values closer to 1 fade slower)	number	0.998
particlesNumber	Number of particles	number	256 * 256
rampColors	Color ramp for visualization	IndexAny	{ 0.0: "#6fb9e6", 0.1: "#8ac4e6", 0.2: "#abdda4", 0.3: "#e6f598", 0.4: "#fee08b", 0.5: "#fdae61", 0.6: "#f46d43", 1.0: "#d53e4f" }
speedFactor	Speed factor/multiplier (controls the overall animation speed)	number	0.15

EVENTS

Name	Description	Parameters
onCreated	Initialization complete event	-

METHODS

Name	Description	Definition