多边形缓冲区（BufferPolygonLayer）

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

示例

示例源码

<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>

手工模式示例

• 单击地图画点
• Esc，Del，Backspace键，删除前一个点
• 双击或者Enter结束手工模式
• 手工模式下，polygon数据无效
• 不支持动态改变manual参数值

示例源码

<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

名称	描述	类型	默认值
id	图层id	string	-
polygon	坐标数组，第一个点需要全等于最后一个点	Array<number[]>	[]
manual	是在地图上手工选点。设置为true时，polygon数据无效	boolean	false
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字体设置	array	['Open Sans Regular']
text-color	countable字体颜色	string	#000000
text-size	countable字体大小	number	16
formatter	countable文字格式化器	function	(area) => string
close-size	关闭Icon放大倍数	number	0.7
close-offset	关闭Icon偏移	number[]	[65, -20]
close-icon-url	自定义关闭Icon URL	string	-

EVENTS

名称	描述	参数
update	改变缓冲区时触发事件	参数：{polygon}
complete	手工模式，缓冲区完成时触发事件	参数：{polygon}
close	点击关闭操作	MapMouseEvent
mouseenter	鼠标滑入缓冲区	-
mouseleave	鼠标滑出缓冲区	-

SLOTS

名称	描述

METHODS

名称	描述	定义