圆形缓冲区（BufferCircleLayer）

支持拖拽改变位置，拖拽改变大小，实时显示半径等功能

TIP

MbBufferCircleLayerV2组件，使用平面像素算法画圆，用以解决4490，4326等坐标系下圆变形问题。 MbBufferCircleLayer组件使用turf.circle画圆，在3857坐标系下，仍可使继续使用。

示例

示例源码

<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坐标系

示例源码

<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

名称	描述	类型	默认值
id	图层id	string	-
center	缓冲区中心点	number[]	-
radius	缓冲区半径，单位千米	number	10
border-color	边框颜色	string	blue
border-opacity	边框透明度	number	0.5
border-width	边框宽度	number	5
background-color	背景色	string	blue
background-opacity	背景透明度	number	0.1
resizer-color	缩放器Icon颜色	string	black
center-color	中心点Icon颜色	string	red
closable	是否显示关闭Icon	boolean	false
countable	是否显示半径数值文字，需要加载Mapbox字体文件	boolean	false
resizable	是否显示缩放器Icon	boolean	false
draggable	是否可拖拽位置	boolean	false
visible	是否显示	boolean	true
resizer-radius	缩放器Icon圆圈半径	number	8
center-radius	中心点Icon圆圈半径	number	8
text-fonts	countable字体设置	string[]	['Open Sans Regular']
text-color	countable字体颜色	string	#000000
text-size	countable字体大小	number	16
formatter	countable文字格式化器	function	(radius) => string
close-size	关闭Icon放大倍数	number	0.7
close-offset	关闭Icon偏移	number[]	[70, 0]
close-icon-url	自定义关闭Icon URL	string	-

EVENTS

名称	描述	参数
update	改变缓冲区时触发事件	参数：{center,radius}
close	点击关闭操作	MapMouseEvent
mouseenter	鼠标滑入缓冲区	-
mouseleave	鼠标滑出缓冲区	-

SLOTS

名称	描述

METHODS

名称	描述	定义