BufferPolygonLayer

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, useState, useRef } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbBufferPolygonLayer, MbTiandituLayer } from '@mapbox-react/core'

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

  const [polygon, setPolygon] = 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']} />
        <MbBufferPolygonLayer
          polygon={polygon}
          borderOpacity={0.5}
          centerColor="red"
          resizerColor="blue"
          backgroundOpacity={0.1}
          closable={true}
          countable={true}
          draggable={true}
          resizable={true}
        />
      </MbMap>
    </div>
  );
}

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

Manual Mode Example

• Click on the map to draw a point
• Press Esc, Del, or Backspace to delete the previous point
• Double-click or press Enter to end manual mode
• In manual mode, polygon data is invalid
• Dynamically changing the manual parameter value is not supported

Example Source Code

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import {
  MbBufferPolygonLayer,
  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']} />
        <MbBufferPolygonLayer
          polygon={[]}
          manual={true}
          borderOpacity={0.5}
          centerColor="red"
          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	-
polygon	For the coordinate array, the first point must be identical to the last point	Array<number[]>	[]
manual	Manually select points on the map. When set to true, polygon data is invalid	boolean	false
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：{polygon}
onComplete	In manual mode, an event is triggered when the buffer is completed	Parameters：{polygon}
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