渐变点（DelayedPointLayer）

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([-85.2809895, 42.9340835])
  const [zoom, setZoom] = useState(4)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbDelayedPointLayer
          data="https://mapbox-web.github.io/mapbox-react/json/americanLibraries.json"
          getPosition={(d) => d.position}
          getFillColor={[49, 92, 114]}
          getRadius={200}
          radiusMinPixels={3}
          getDelayFactor={(d) => {
            const result = Math.abs(d.position[0] + 71) / 50
            return result < 0 ? 0 : result > 1 ? 1 : result
          }}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称	描述	类型	默认值
id	图层Id	string	-
getDelayFactor	-	AnyFunc	-
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	{}
radiusUnits	-	string('meters','pixels')	meters
radiusScale	-	number	1
lineWidthUnits	-	string	meter
lineWidthScale	-	number	1
stroked	-	boolean	false
filled	-	boolean	true
radiusMinPixels	-	number	0
radiusMaxPixels	-	number	Number.MAX_SAFE_INTEGER
lineWidthMinPixels	-	number	0
lineWidthMaxPixels	-	number	Number.MAX_SAFE_INTEGER
getPosition	-	AnyFunc	(d) => d.position
getRadius	-	number / AnyNumberFunc	1
getFillColor	-	number[] / AnyFunc	[0, 0, 0, 255]
getLineColor	-	number[] / AnyFunc	[0, 0, 0, 255]
getLineWidth	-	number / AnyNumberFunc	1

EVENTS

名称	描述	参数

METHODS

名称	描述	定义