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

<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-circle-layer
        :center="center"
        :radius="radius"
        border-color="red"
        :border-opacity="0.5"
        background-color="red"
        center-color="red"
        resizer-color="blue"
        :background-opacity="0.1"
        text-color="blue"
        :closable="true"
        :countable="true"
        :draggable="true"
        :resizable="true"
      />
    </mb-map>
  </div>
</template>
<script setup lang="ts">
const center = [116.17381, 39.92155464]
const radius = 10
</script>

EPSG:4490(CGCS2000)

Example Source Code

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

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
center	Buffer center point	number[]	-
radius	Buffer radius, in kilometers	number	10
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：{center,radius}
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