PathLayer

Example

Bus route visualization demo (Baidu data, biased)

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([116.314177, 39.832819])
  const [zoom, setZoom] = useState(8)
  const [pitch, setPitch] = useState(20)
  const mapInst = useRef<any>()

  const data =
    'https://mapbox-web.github.io/mapbox-react/json/beijing-bus-lines.json'
  const [width, setWidth] = useState(100)

  const getPath = (data: any[]) => {
    let prevPt: number[] = []
    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
  }

  return (
    <div className="map-wrapper">
      <MbMap ref={mapInst} center={mapCenter} zoom={zoom} pitch={pitch}>
        <MbPathLayer data={data} getPath={getPath} getWidth={width} />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Layer ID. A unique identifier for the layer.	string	-
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.	string / IndexAny / AnyArr / Promise<any>	''
getColor	Color information. This can be a string representing a color name (e.g., 'red', 'blue'), a function that returns a color based on the data, or an array of RGBA values (e.g., [255, 0, 0, 255] for red).	string / AnyFunc / number[]	'black'
getPath	Function to retrieve path information from the data. The function should accept a data item as an argument and return an array of coordinates representing the path. The default implementation assumes the data item has a 'path' property containing the coordinates.	AnyFunc	object => object.path
getWidth	Width information. This can be a fixed number or a function that returns a width based on the data.	number / AnyNumberFunc	100
highlightColor	The color to blend with the original color of the highlighted object. This is used to create the highlight effect. The value can be a string or an RGBA array.	string / number[]	[255, 255, 128, 1]
highlightedObjectIndex	The index of the currently highlighted element within the data. A value of -1 indicates that no object is highlighted.	number	-1
miterLimit	The miter limit. This property applies only when joint-rounded is false. It controls the maximum length of the miter (the extension of the outer corners of a join).	number	4
capCounded	Whether the line caps are rounded. If true, the ends of the lines will be rounded; otherwise, they will be square.	boolean	false
jointRounded	Whether the line joints are rounded. If true, the corners where lines meet will be rounded; otherwise, they will be sharp.	boolean	false
opacity	The opacity of the layer (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
widthMaxPixels	The maximum width in pixels. This limits the width of the rendered lines.	number	Number.MAX_SAFE_INTEGER
widthMinPixels	The minimum width in pixels. This ensures that lines are not rendered with a width smaller than this value.	number	0
widthScale	A scaling factor applied to the width. This allows you to easily adjust the width of all lines in the layer.	number	1
widthUnits	Units for the width: 'pixels' or 'meters'. Specifies whether the width values are interpreted as pixels or meters in world space.	string ('pixels', 'meters')	'meters'

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