扇形缓冲区（BufferSectorLayer）

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

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.17381, 39.92155464])
  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']} />
        <MbBufferSectorLayer
          center={mapCenter}
          radius={8}
          startAngle={315}
          borderColor="blue"
          borderOpacity={0.5}
          backgroundColor="blue"
          centerColor="red"
          resizerColor="blue"
          backgroundOpacity={0.1}
          closable={true}
          countable={true}
          draggable={true}
          resizable={true}
          rotatable={true}
        />
      </MbMap>
    </div>
  );
}

ReactDOM.render(<App />,
  document.getElementById("root"))

API

PROPS

名称	描述	类型	默认值
id	图层id	string	-
center	缓冲区中心点	number[]	-
radius	缓冲区半径，单位千米	number	10
startAngle	开始角度，圆心正北方向为0度，顺时针旋转。0~360之间	number	0
endAngle	结束角度，圆心正北方向为0度，顺时针旋转。0~360之间	number	90
borderColor	边框颜色	string	blue
borderOpacity	边框透明度	number	0.5
borderWidth	边框宽度	number	5
backgroundColor	背景色	string	blue
backgroundOpacity	背景透明度	number	0.1
resizerColor	缩放器Icon颜色	string	black
centerColor	中心点Icon颜色	string	red
closable	是否显示关闭Icon	boolean	false
countable	是否显示半径数值文字，需要加载mapbox字体文件	boolean	false
resizable	是否显示缩放器Icon	boolean	false
draggable	是否可拖拽位置	boolean	false
rotatable	是否可旋转角度	boolean	false
visible	是否显示	boolean	true
resizerRadius	缩放器Icon圆圈半径	number	8
centerRadius	中心点Icon圆圈半径	number	8
textFonts	countable字体设置	string[]	['Open Sans Regular']
textColor	countable字体颜色	string	#000000
textSize	countable字体大小	number	16
formatter	countable文字格式化器	function	(area, radius) => string
closeSize	关闭icon放大倍数	number	0.7
closeOffset	关闭icon偏移	number[]	[65, -20]
closeIconUrl	自定义关闭Icon URL	string	-

EVENTS

名称	描述	参数
onUpdate	改变缓冲区时触发事件	参数：{center,radius,startAngle,endAngle}
onClose	点击关闭操作	MapMouseEvent
onMouseEnter	鼠标滑入缓冲区	-
onMouseLeave	鼠标滑出缓冲区	-

METHODS

名称	描述	定义