烟火（SparkLayer）

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.179267984000035, 39.918961127600085])
  const [zoom, setZoom] = useState(14.5)
  const [pitch, setPitch] = useState(60)
  const mapInst = useRef<any>()

  const [data, setData] = useState<any[]>([])
  const [speed, setSpeed] = useState(5)

  const loadData = () => {
    const sparkData: any[] = []
    for (let i = 0; i < 100; i++) {
      sparkData.push({
        coordinates: [
          116.168 + Math.random() * 0.014,
          39.917 + Math.random() * 0.007,
        ],
        properties: {
          height: 400 + Math.random() * 500,
          color: [255, 100 + Math.random() * 150, 100 + Math.random() * 150],
        },
      })
    }
    setData(sparkData)
  }

  useEffect(() => {
    loadData()
  }, [])

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbGradientBuildingLayer
          data="https://mapbox-web.github.io/mapbox-react/showcase/building.geojson"
          getFillColor={[0, 128, 128]}
          dataTransform={(d) => d.features}
          getPolygon={(d) => d.geometry.coordinates[0]}
          getElevation={(d) => d.properties.Floor * 50}
        />
        <MbSparkLayer
          data={data}
          getPosition={(d) => d.coordinates}
          getHeight={(d) => d.properties.height}
          getColor={(d) => d.properties.color}
          trailLength={100}
          speed={speed}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称	描述	类型	默认值
id	图层Id	string	-
getPosition	-	AnyFunc	-
getHeight	-	number / AnyNumberFunc	1000
trailLength	-	number	100
speed	-	number	10
getColor	-	string / AnyFunc	black
data	图层源数据	string / IndexAny / AnyArr / Promise<any>	''
show	是否显示	boolean	true
opacity	透明度	number	1
pickable	图层是否会响应鼠标事件，若为false，则组件不会emit鼠标相关事件	boolean	false
autoHighlight	本属性为true且pickable为true时，则会将鼠标悬浮选中的对象设为高亮	boolean	false
highlightColor	要与高亮对象原始颜色进行混合(blend)的颜色值	string / number[]	[255, 255, 128, 1]
highlightedObjectIndex	高亮元素序号	number	-1
onDataLoad	-	AnyFunc	-
dataTransform	-	AnyFunc	-
transitions	-	IndexAny	{}

EVENTS

名称	描述	参数

METHODS

名称	描述	定义