Mapbox React

中文

English

中文

English

Appearance

折线图层（PolyineLayer） ​

示例 ​

示例源码
tsx
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'))

动画示例 ​

示例源码
tsx
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 ​

名称描述类型默认值
id图层idstring-
dashArray形成虚线的 实线段与间隙的长度。以线宽为单位number[]-
color颜色值 支持 "#000000" "rgb(0,0,0)" [255,0,0,1]等模式string / number[]#000000
data矢量图层的数据 数组中每个对象需包含必需的coordinates属性以及可选的properties属性 每一个对象代表一个点/一条线/一个多边形VectorLayerData-
geoJsonDataSourcegeojson数据源，可设为geojson数据链接或geojson数据对象；规范链接， 若设置了本属性，则data属性失效string / GeoJSONSource-
opacity透明度number1
lineCap-string("butt" "round" "square")butt
lineJoin-string("bevel" "round" "miter")miter
maxzoom最大缩放级别number22
minzoom最小缩放级别number0
pickable图层是否响应拾取事件，若为false，则组件不会emit鼠标相关事件booleantrue
show是否显示booleantrue
sourceId图层Source的id，若设置了本ID，则geoJsonDataSource与data属性都会失效string-
sourceLayerName源数据中图层名称 设置sourceId时，此属性生效string-
translate偏移量，正数表示 右/下number[][0,0]
offset线偏移number0
width宽度，以像素值为单位number1
offset对应Mapbox line-offset属性number0
blur对应Mapbox line-blur属性number0
autoHighlight是否自动高亮booleanfalse
highlightColor高亮颜色string / number[][255, 255, 128, 1]
generateId是否自动生成GeoJSON Feature Id。如果数据没有Id，自动高亮时，需设置为truebooleanfalse
useExpression是否使用表达式，设置为true时，将不会解析颜色相关属性booleanfalse

EVENTS ​

名称描述参数
onCreated地图初始化完成事件-
onClick图层单击事件object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
onMouseMove鼠标移动事件object — 包含屏幕坐标pixel、经纬度coordinate与选中元素的属性properties、originalEvent
onMouseLeave鼠标移出元素事件MapMouseEvent

METHODS ​

名称描述定义
exportToGeoJson将本图层数据导出为geojson格式数据文本 若图层数据源来自source组件或为url，则输出null（）=> object | null