椭圆缓冲区（BufferEllipseLayer）

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

示例

示例源码

<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-ellipse-layer
        :center="center"
        :x-semi-axis="10"
        :y-semi-axis="5"
        :angle="0"
        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"
        :rotatable="true"
      />
    </mb-map>
  </div>
</template>
<script setup lang="ts">
const center = [116.17381, 39.92155464]
</script>

API

PROPS

名称	描述	类型	默认值
id	图层id	string	-
center	缓冲区中心点	number[]	-
x-semi-axis	x轴半径	number	5
y-semi-axis	y轴半径	number	10
angle	旋转角度，0~360	number	0
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
rotatable	是否可旋转角度	boolean	false
visible	是否显示	boolean	true
resizer-radius	缩放器Icon圆圈半径	number	8
center-radius	中心点Icon圆圈半径	number	8
text-fonts	countable字体设置	array	['Open Sans Regular']
text-color	countable字体颜色	string	#000000
text-size	countable字体大小	number	16
formatter	countable文字格式化器	function	(area, x, y) => string
close-size	关闭Icon放大倍数	number	0.7
close-offset	关闭Icon偏移	number[]	[40, -25]
close-icon-url	自定义关闭Icon URL	string	-

EVENTS

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

SLOTS

名称	描述

METHODS

名称	描述	定义