线型缓冲区（BufferLineLayer）

支持拖拽改变位置，拖拽改变大小，实时显示面积等功能

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.20381, 39.95155464])
  const [zoom, setZoom] = useState(10)

  const [lineString] = useState([
    [116.17381, 39.92155464],
    [116.25105956968257, 40.02398993628292],
    [116.31591012802686, 39.96769599504311],
    [116.3234327392287, 39.892836286211754],
  ])

  return (
    <div className="map-wrapper">
      <MbMap
        center={mapCenter}
        zoom={zoom}
        glyphs="https://mapbox-web.github.io/mapbox-react/fonts/{fontstack}/{range}.pbf"
        sprite="https://mapbox-web.github.io/mapbox-react/sprites/sprite"
      >
        <MbTiandituLayer types={['vec']} />
        <MbBufferLineLayer
          lineString={lineString}
          radius={2}
          borderOpacity={0.5}
          resizerColor="blue"
          backgroundOpacity={0.1}
          closable={true}
          countable={true}
          draggable={true}
          resizable={true}
        />
      </MbMap>
    </div>
  )
}

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

手工模式示例

• 单击地图画点
• Esc，Del，Backspace键，删除前一个点
• 双击或者Enter结束手工模式
• 手工模式下，lineString数据无效
• 不支持动态改变manual参数值

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.20381, 39.95155464])
  const [zoom, setZoom] = useState(10)

  return (
    <div className="map-wrapper">
      <MbMap
        center={mapCenter}
        zoom={zoom}
        glyphs="https://mapbox-web.github.io/mapbox-react/fonts/{fontstack}/{range}.pbf"
        sprite="https://mapbox-web.github.io/mapbox-react/sprites/sprite"
      >
        <MbTiandituLayer types={['vec']} />
        <MbBufferLineLayer
          lineString={[]}
          radius={2}
          manual={true}
          borderOpacity={0.5}
          resizerColor="blue"
          backgroundOpacity={0.1}
          closable={true}
          countable={true}
          draggable={true}
          resizable={true}
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

名称	描述	类型	默认值
id	图层id	string	-
lineString	坐标数组	Array<number[]>	[]
manual	是在地图上手工选点。设置为true时，polygon数据无效	boolean	false
radius	半径，单位千米	number	10
borderColor	边框颜色	string	blue
borderOpacity	边框透明度	number	0.5
borderWidth	边框宽度	number	5
backgroundColor	背景色	string	blue
backgroundOpacity	背景透明度	number	0.1
resizerColor	缩放器Icon颜色	string	black
closable	是否显示关闭Icon	boolean	false
countable	是否显示半径指示器，需要加载mapbox字体文件	boolean	false
resizable	是是否显示缩放器Icon	boolean	false
draggable	是否可拖拽位置	boolean	false
visible	是否显示	boolean	true
resizerRadius	缩放器Icon圆圈半径	number	8
textFonts	countable字体设置	string[]	['Open Sans Regular']
textColor	countable字体颜色	string	#000000
textSize	countable字体大小	number	16
formatter	countable文字格式化器	function	(area) => string
closeSize	关闭Icon放大倍数	number	0.7
closeOffset	关闭Icon偏移	number[]	[65, -20]
closeIconUrl	自定义关闭Icon URL	string	-

EVENTS

名称	描述	参数
onUpdate	改变缓冲区时触发事件	参数：{lineString, polygon}
onComplete	手工模式，缓冲区完成时触发事件	参数：{lineString, polygon}
onClose	点击关闭操作	MapMouseEvent
onMouseEnter	鼠标滑入缓冲区	-
onMouseLeave	鼠标滑出缓冲区	-

METHODS

名称	描述	定义