BufferCircleLayer

Supports drag-and-drop to change position, drag-and-drop to resize, real-time radius display, and other features.

TIP

• The MbBufferCircleLayerV2 component uses a planar pixel algorithm to draw circles, which solves the circle distortion problem in coordinate systems such as 4490 and 4326.
• The MbBufferCircleLayer component uses turf.circle to draw circles. It can still be used in the 3857 coordinate system.

Example

Example Source Code

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(CGCS2000)

Example Source Code

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

Name	Description	Type	Default
id	Layer ID	string	-
center	Buffer center point	number[]	-
radius	Buffer radius, in kilometers	number	10
borderColor	Border color	string	blue
borderOpacity	Border opacity	number	0.5
borderWidth	Border width	number	5
backgroundColor	Background color	string	blue
backgroundOpacity	Background opacity	number	0.1
resizerColor	Resizer icon color	string	black
centerColor	Center point icon color	string	red
closable	Whether to display the close icon	boolean	false
countable	Whether to display the radius value as text. You need to load Mapbox font files	boolean	false
resizable	Whether to display the resizer icon	boolean	false
draggable	Whether the buffer is draggable	boolean	false
visible	Whether to display the buffer	boolean	true
resizerRadius	Resizer icon circle radius	number	8
centerRadius	Center point icon circle radius	number	8
textFonts	Font settings for countable text	string[]	['Open Sans Regular']
textColor	Color of the countable text.	string	#000000
textSize	Size of the countable text	number	16
formatter	Formatter for the countable text	function	(radius) => string
closeSize	Scaling factor for the close icon	number	0.7
closeOffset	Offset of the close icon	number[]	[70, 0]
closeIconUrl	URL of a custom close icon	string	-

EVENTS

Name	Description	Parameters
onUpdate	Triggered when the buffer is changed	Parameters：{center,radius}
onClose	Triggered when the close operation is clicked	MapMouseEvent
onMouseEnter	Triggered when the mouse enters the buffer	-
onMouseLeave	Triggered when the mouse leaves the buffer	-

METHODS

Name	Description	Definition