动态轨迹（TrailLayer）

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.17381, 39.92155464])
  const [zoom, setZoom] = useState(9)
  const [pitch, setPitch] = useState(0)
  const mapInst = useRef<any>()

  const [trailLength, setTrailLength] = useState(3)

  const getPath = (data: any) => {
    let prevPt: any
    const points: number[][] = []
    for (let i = 0; i < data.length; i += 2) {
      let pt = [data[i], data[i + 1]]
      if (i > 0) {
        pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]]
      }
      prevPt = pt

      points.push([pt[0] / 1e4, pt[1] / 1e4])
    }
    return points
  }
  const getColor = () => [
    Math.random() * 150 + 100,
    Math.random() * 100 + 28,
    93,
  ]

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbTrailLayer
          data="https://mapbox-web.github.io/mapbox-react/json/beijing-bus-lines.json"
          getPath={getPath}
          getColor={getColor}
          getWidth={100}
          speed={3}
          trailLength={trailLength}
          interval={5}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称	描述	类型	默认值
id	图层Id	string	-
speed	速度	number	1
trailLength	-	number	10
interval	时间间隔	number	5
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	{}
getColor	颜色信息	string / AnyFunc / number[]	black
getPath	路径信息	AnyFunc	object => object.path
getWidth	宽度信息	number / AnyNumberFunc	100
miterLimit	rounded为false时生效	number	4
capRounded	-	boolean	false
jointRounded	-	boolean	false
widthMaxPixels	-	number	Number.MAX_SAFE_INTEGER
widthMinPixels	-	number	0
widthScale	-	number	1
widthUnits	-	string（pixels / meters）	meters

EVENTS

名称	描述	参数

METHODS

名称	描述	定义