Rain

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([120, 30])
  const [zoom, setZoom] = useState(6)
  const [pitch, setPitch] = useState(90)
  const mapInst = useRef<any>()

  let map: any
  let layer: any
  const [show, setShow] = useState(true)

  const mapCreated = (mapbox: any) => {
    map = mapbox
  }
  const layerCreated = () => {
    initL7()
  }
  const update = useCallback(() => {
    setShow((s) => {
      layer.setVisibility(!s)
      layer.reRender()
      return !s
    })
  }, [setShow])
  const initL7 = () => {
    layer = new map.mapboxgl.supermap.L7Layer({ type: 'GeometryLayer' })
    layer
      .getL7Layer()
      .shape('sprite')
      .size(10)
      .style({
        opacity: 0.7,
        mapTexture: `https://mapbox-web.github.io/mapbox-react/images/rainDrop.png`,
        center: [120, 30],
        spriteCount: 120,
        spriteRadius: 10,
        spriteTop: 1000,
        spriteUpdate: 5,
        spriteScale: 0.6,
      })
    map.addLayer(layer)
  }

  return (
    <div className="map-wrapper">
      <MbMap
        ref={mapInst}
        center={mapCenter}
        zoom={zoom}
        pitch={pitch}
        onCreated={mapCreated}
      >
        <button className="btn primary" onClick={update}>
          Show/Hide:{`${show}`}
        </button>
        <MbTiandituLayer types={['img', 'cva']} onCreated={layerCreated} />
      </MbMap>
    </div>
  )
}

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