BufferEllipseLayer

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

Example

Example Source Code

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import {
  MbBufferEllipseLayer,
  MbMap,
  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']} />
        <MbBufferEllipseLayer
          center={mapCenter}
          xSemiAxis={10}
          ySemiAxis={5}
          angle={0}
          borderColor="blue"
          borderOpacity={0.5}
          backgroundColor="blue"
          centerColor="red"
          resizerColor="blue"
          backgroundOpacity={0.1}
          closable={true}
          countable={true}
          draggable={true}
          resizable={true}
          rotatable={true}
          closeIconUrl="https://mapbox-web.github.io/mapbox-react/images/common_toget.png"
        />
      </MbMap>
    </div>
  )
}

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

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
center	Buffer center point	number[]	-
xSemiAxis	x-axis semi-axis (or semi-major axis)	number	5
ySemiAxis	y-axis semi-axis (or semi-minor axis)	number	10
angle	Rotation angle, 0~360 degrees	number	0
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
rotatable	Whether the buffer is rotatable	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

名称	描述	参数
onUpdate	Triggered when the buffer is changed	Parameters：{center,angle,xSemiAxis,ySemiAxis}
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