PolyineLayer

Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([116.38745, 39.91266])
  const [zoom, setZoom] = useState(1)

  const colors = ['rgba(255,125,0,0.5)', '#ec71a9', 'red']
  const [colorIndex, setColorIndex] = useState(0)
  const polylineCoordinates = [
    {
      coordinates: [
        [137.4609375, 39.639537564366684],
        [136.7578125, 49.38237278700955],
        [126.5625, 54.77534585936447],
        [103.35937499999999, 53.9560855309879],
        [83.3203125, 47.040182144806664],
        [66.796875, 34.59704151614417],
        [73.47656249999999, 21.94304553343818],
        [87.5390625, 11.178401873711785],
        [105.1171875, 8.754794702435618],
        [115.6640625, 13.581920900545844],
        [114.9609375, 25.48295117535531],
        [93.8671875, 25.799891182088334],
        [85.4296875, 31.653381399664],
        [91.0546875, 39.095962936305476],
        [104.765625, 41.50857729743935],
        [114.9609375, 41.50857729743935],
        [121.28906250000001, 37.71859032558816],
        [127.265625, 32.84267363195431],
        [130.78125, 28.92163128242129],
      ],
    },
    {
      coordinates: [
        [47.8125, -24.846565348219734],
        [183.1640625, -19.642587534013032],
        [176.48437499999997, 70.02058730174062],
        [33.046875, 67.60922060496382],
        [33.046875, -22.91792293614603],
        [31.9921875, -26.11598592533351],
      ],
    },
  ]

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <div style={{ position: 'absolute', top: '5px', left: '5px' }}>
          <button className="primary" onClick={() => setColorIndex((c) => ++c)}>
            Switch Color
          </button>
        </div>
        <MbTiandituLayer types={['vec']} />
        <MbPolylineLayer
          data={polylineCoordinates}
          width={3}
          color={colors[colorIndex % colors.length]}
          dashArray={[2, 1]}
        />
      </MbMap>
    </div>
  )
}

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

Animation Example

Example Source Code

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

const App = () => {
  const [mapCenter] = useState([116.33, 39.91])
  const [zoom, setZoom] = useState(12)

  let step = 0
  const [dashArray, setDashArray] = useState([0, 4, 3])
  const polylineCoordinates = [
    {
      coordinates: [
        [116.28, 39.91],
        [116.29, 39.91],
        [116.32, 39.92],
        [116.33, 39.91],
        [116.32, 39.9],
        [116.32, 39.89],
        [116.3, 39.89],
        [116.29, 39.89],
        [116.27, 39.9],
      ],
    },
  ]
  const dashArraySequence = [
    [0, 4, 3],
    [0.5, 4, 2.5],
    [1, 4, 2],
    [1.5, 4, 1.5],
    [2, 4, 1],
    [2.5, 4, 0.5],
    [3, 4, 0],
    [0, 0.5, 3, 3.5],
    [0, 1, 3, 3],
    [0, 1.5, 3, 2.5],
    [0, 2, 3, 2],
    [0, 2.5, 3, 1.5],
    [0, 3, 3, 1],
    [0, 3.5, 3, 0.5],
  ]

  const start = () => {
    animate(0)
  }
  const animate = (timestamp: number) => {
    const newStep = Number.parseInt(
      `${(timestamp / 50) % dashArraySequence.length}`
    )

    if (newStep !== step) {
      setDashArray(dashArraySequence[step])
      step = newStep
    }
    requestAnimationFrame(animate)
  }

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

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom}>
        <MbTiandituLayer types={['vec']} />
        <MbPolylineLayer
          data={polylineCoordinates}
          width={6}
          color="blue"
          dashArray={dashArray}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
dashArray	The length of the solid segments and gaps that form the dashed line. Measured in line width units	number[]	-
color	Color value. Supports modes such as "#000000", "rgb(0,0,0)", [255,0,0,1]	string / number[]	#000000
data	Data for the vector layer. Each object in the array must contain the required coordinates property and the optional properties property. Each object represents a point/line/polygon	VectorLayerData	-
geoJsonDataSource	GeoJSON data source. Can be set to a GeoJSON data link or a GeoJSON data object. Specification Link. If this property is set, the data property is ignored	string / GeoJSONSource	-
opacity	Opacity	number	1
lineCap	-	string("butt" "round" "square")	butt
lineJoin	-	string("bevel" "round" "miter")	miter
maxzoom	Maximum zoom level	number	22
minzoom	Minimum zoom level	number	0
pickable	Whether the layer responds to pick events. If false, the component will not emit mouse-related events	boolean	true
show	Whether to show the layer	boolean	true
sourceId	ID of the layer's source. If this ID is set, both the geoJsonDataSource and data properties are ignored	string	-
sourceLayerName	Layer name in the source data. This property is effective when sourceId is set	string	-
translate	Offset. Positive numbers indicate right/down	number[]	[0,0]
offset	Line offset	number	0
width	Width in pixels	number	1
offset	Mapbox line-offset property	number	0
blur	Mapbox line-blur property	number	0
autoHighlight	Whether to automatically apply highlighting	boolean	false
highlightColor	The highlight color	string / number[]	[255, 255, 128, 1]
generateId	Whether to automatically generate GeoJSON Feature IDs. If the data does not have IDs and automatic highlighting is required, this must be set to true	boolean	false
useExpression	Whether to use an expression. When set to true, color-related properties will not be parsed	boolean	false

EVENTS

Name	Description	Parameters
onCreated	Map initialization completed event	-
onClick	Layer click event	object — Contains screen coordinates (pixel), longitude/latitude (coordinate), selected element properties, and originalEvent
onMouseMove	Mouse move event	object — Contains screen coordinates (pixel), longitude/latitude (coordinate), selected element properties, and originalEvent
onMouseLeave	Mouse leave element event	MapMouseEvent

METHODS

Name	Description	Definition
exportToGeoJson	Translate the layer's data to GeoJSON formatted text. If the layer's data source comes from a source component or a URL, output null.	（）=> object | null