ArcLayer

Example

Example Source Code

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

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
sourcePosition	Source position. This defines the starting point of the connection/line. Can be an array of coordinates (e.g., [longitude, latitude] or [x, y, z]) or a function that returns the coordinates based on the data.	AnyArr / AnyFunc	-
targetPosition	Target position. This defines the ending point of the connection/line. Can be an array of coordinates (e.g., [longitude, latitude] or [x, y, z]) or a function that returns the coordinates based on the data.	AnyArr / AnyFunc	-
autoHighlight	When this property is true and pickable is also true, the object under the mouse cursor will be highlighted. This provides visual feedback when hovering over interactive elements.	boolean	false
data	Source data for the layer. This can be a string representing a URL, an object, an array, or a Promise that resolves to data. This data is often used in conjunction with accessor functions (like source-position, target-position, source-color, target-color, etc.) to dynamically style the connections/lines.	string / IndexAny / AnyArr / Promise<any>	''
highlightColor	The color to blend with the original color of the highlighted object. This creates the highlight effect. The value can be a color string (e.g., 'red', '#FF0000') or an RGBA array (e.g., [255, 0, 0, 255] for red).	string / number[]	[255, 255, 128, 1]
highlightedObjectIndex	The index of the currently highlighted object within the data. A value of -1 indicates that no object is currently highlighted.	number	-1
opacity	The opacity of the connection/line (0-1). 0 is fully transparent, and 1 is fully opaque.	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events (e.g., click, hover).	boolean	false
show	Whether the layer is visible. If true, the layer will be rendered; otherwise, it will be hidden.	boolean	true
sourceColor	Color of the source point of the connection/line. This can be a string representing a color name, a function that returns a color based on the data, or an array of RGBA values.	string / AnyFunc	'black'
targetColor	Color of the target point of the connection/line. This can be a string representing a color name, a function that returns a color based on the data, or an array of RGBA values.	string / AnyFunc	'black'
width	Width of the connection/line. This can be a fixed number or a function that returns the width based on the data.	number / AnyNumberFunc	1

EVENTS

Name	Description	Parameters
onCreated	Initialization complete event	-
onMouseMove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
onMouseLeave	-	-
onClick	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

METHODS

Name	Description	Definition