圆形缓冲区（BufferCircleLayer）

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

TIP

MbBufferCircleLayerV2组件，使用平面像素算法画圆，用以解决4490，4326等坐标系下圆变形问题。 MbBufferCircleLayer组件使用turf.circle画圆，在3857坐标系下，仍可使继续使用。

示例

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.10381, 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']} />
        <MbBufferCircleLayer
          center={mapCenter}
          radius={8}
          borderColor="blue"
          borderOpacity={0.5}
          backgroundColor="blue"
          centerColor="black"
          resizerColor="blue"
          backgroundOpacity={0.1}
          closable={true}
          countable={true}
          draggable={true}
          resizable={true}
        />
      </MbMap>
    </div>
  )
}

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

EPSG:4490坐标系

示例源码

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

const App = () => {
  const [mapCenter] = useState([116.10381, 39.92155464])
  const [zoom, setZoom] = useState(10)

  return (
    <div className="map-wrapper">
      <MbMap
        center={mapCenter}
        zoom={zoom}
        crs="EPSG:4490"
        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']} />
        <MbBufferCircleLayer
          center={mapCenter}
          radius={8}
          borderColor="blue"
          borderOpacity={0.5}
          backgroundColor="blue"
          centerColor="black"
          resizerColor="blue"
          backgroundOpacity={0.1}
          closable={true}
          countable={true}
          draggable={true}
          resizable={true}
        />
        <MbBufferCircleLayerV2
          center={mapCenter}
          radius={8}
          borderColor="blue"
          borderOpacity={0.5}
          backgroundColor="blue"
          centerColor="black"
          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	-
center	缓冲区中心点	number[]	-
radius	缓冲区半径，单位千米	number	10
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
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	(radius) => string
closeSize	关闭Icon放大倍数	number	0.7
closeOffset	关闭Icon偏移	number[]	[70, 0]
closeIconUrl	自定义关闭Icon URL	string	-

EVENTS

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

METHODS

名称	描述	定义