风场（WindLayer）

示例

示例源码

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

名称	描述	类型	默认值
id	图层Id	string	-
image	图片路径	string	-
windMax	-	number[]	-
windMin	-	number[]	-
windOrigin	-	number[]	-
windRange	-	number[]	-
windRes	-	number[]	-
dropRate	-	number	0.003
dropRateBump	-	number	0.01
fadeOpacity	-	number	0.998
particlesNumber	粒子数量	number	256 * 256
rampColors	颜色	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	速度因子	number	0.15

EVENTS

名称	描述	参数
onCreated	初始化完成事件	-

METHODS

名称	描述	定义