弧线图层（ArcLayer）

示例

示例源码

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbWmtsLayer } from '@mapbox-react/core'
import { MbArcLayer } from '@mapbox-react/deck-layers'

const App = () => {
  const [mapCenter] = useState([116, 39])
  const [zoom, setZoom] = useState(2)
  const [pitch, setPitch] = useState(60)
  const mapInst = useRef<any>()

  const [data, setData] = useState<any[]>([])
  const sourcePosition = [116, 39]
  const targetPosition = (d: { to: any }) => d.to
  const [sourceColor, setSourceColor] = useState('rgb(255, 0, 128)')
  const targetColor = 'rgb(0, 200, 255)'

  const getRandomArbitrary = (min: number, max: number) => {
    return Math.random() * (max - min) + min
  }

  const loadArcData = () => {
    for (let i = 0; i < 100; i++) {
      setData((d) => [
        ...d,
        { to: [getRandomArbitrary(81, 150), getRandomArbitrary(0, 60)] },
      ])
    }
  }

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

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbWmtsLayer
          url="https://t{s}.tianditu.gov.cn/img_w/wmts?tk=b8ed92ff9b64aebcb0110acca15e478f"
          layerName="img"
          layerStyle="default"
          tileMatrixSetID="w"
          subdomains="01234567"
          maxzoom={18}
        />
        <MbArcLayer
          data={data}
          sourcePosition={sourcePosition}
          targetPosition={targetPosition}
          width={3}
          sourceColor={sourceColor}
          targetColor={targetColor}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

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

EVENTS

名称	描述	参数
onCreated	初始化完成事件	-
onMouseMove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
onMouseLeave	-	-
onClick	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

METHODS

名称	描述	定义