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

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map
      :zoom="10"
      :center="center"
      :glyphs="__RESOURCE_URL__ + 'fonts/{fontstack}/{range}.pbf'"
    >
      <mb-tianditu-layer />
      <mb-buffer-polygon-layer
        :polygon="polygon"
        border-color="red"
        :border-opacity="0.5"
        background-color="red"
        center-color="red"
        resizer-color="blue"
        :background-opacity="0.1"
        :closable="true"
        :countable="true"
        :draggable="true"
        :resizable="true"
      />
    </mb-map>
  </div>
</template>
<script setup lang="ts">
const center = [116.17381, 39.92155464]
const polygon = [
  [116.17381, 39.92155464],
  [116.25105956968257, 40.02398993628292],
  [116.31591012802686, 39.96769599504311],
  [116.3234327392287, 39.892836286211754],
]
</script>

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

<template>
  <div style="height: 400px" class="vw-full vh-full">
    <mb-map
      :zoom="10"
      :center="center"
      :glyphs="__RESOURCE_URL__ + 'fonts/{fontstack}/{range}.pbf'"
    >
      <mb-tianditu-layer />
      <mb-buffer-polygon-layer
        :manual="true"
        border-color="red"
        :border-opacity="0.5"
        background-color="red"
        center-color="red"
        resizer-color="blue"
        :background-opacity="0.1"
        :closable="true"
        :countable="true"
        :draggable="true"
        :resizable="true"
      />
    </mb-map>
  </div>
</template>
<script setup lang="ts">
const center = [116.17381, 39.92155464]
</script>

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
border-color	Border color	string	blue
border-opacity	Border opacity	number	0.5
border-width	Border width	number	5
background-color	Background color	string	blue
background-opacity	Background opacity	number	0.1
resizer-color	Resizer icon color	string	black
center-color	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
resizer-radius	Resizer icon circle radius	number	8
center-radius	Center point icon circle radius	number	8
text-fonts	Font settings for countable text	string[]	['Open Sans Regular']
text-color	Color of the countable text.	string	#000000
text-size	Size of the countable text	number	16
formatter	Formatter for the countable text	function	(radius) => string
close-size	Scaling factor for the close icon	number	0.7
close-offset	Offset of the close icon	number[]	[70, 0]
close-icon-url	URL of a custom close icon	string	-

EVENTS

Name	Description	Parameters
update	Triggered when the buffer is changed	Parameters：{polygon}
complete	In manual mode, an event is triggered when the buffer is completed	Parameters：{polygon}
close	Triggered when the close operation is clicked	MapMouseEvent
mouseenter	Triggered when the mouse enters the buffer	-
mouseleave	Triggered when the mouse leaves the buffer	-

SLOTS

Name	Description

METHODS

Name	Description	Definition