Skip to content

BufferLineLayer

Supports drag-and-drop to change position, drag-and-drop to resize, and real-time area display, among other features.

Example

Example Source Code
vue
<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-line-layer
        :line-string="lineString"
        :radius="2"
        border-color="red"
        :border-opacity="0.5"
        background-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 lineString = [
  [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, lineString data is invalid
  • Dynamically changing the manual parameter value is not supported
Example Source Code
vue
<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-line-layer
        :radius="2"
        :line-string="[]"
        :manual="true"
        border-color="red"
        :border-opacity="0.5"
        background-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

NameDescriptionTypeDefault
idLayer IDstring-
line-stringcoordinates arrayArray<number[]>[]
manualManually select points on the map. When set to true, lineString data is invalidbooleanfalse
radiusBuffer radius, in kilometersnumber10
border-colorBorder colorstringblue
border-opacityBorder opacitynumber0.5
border-widthBorder widthnumber5
background-colorBackground colorstringblue
background-opacityBackground opacitynumber0.1
resizer-colorResizer icon colorstringblack
closableWhether to display the close iconbooleanfalse
countableWhether to display the radius value as text. You need to load Mapbox font filesbooleanfalse
resizableWhether to display the resizer iconbooleanfalse
draggableWhether the buffer is draggablebooleanfalse
visibleWhether to display the bufferbooleantrue
resizer-radiusResizer icon circle radiusnumber8
text-fontsFont settings for countable textstring[]['Open Sans Regular']
text-colorColor of the countable text.string#000000
text-sizeSize of the countable textnumber16
formatterFormatter for the countable textfunction(radius) => string
close-sizeScaling factor for the close iconnumber0.7
close-offsetOffset of the close iconnumber[][70, 0]
close-icon-urlURL of a custom close iconstring-

EVENTS

NameDescriptionParameters
updateTriggered when the buffer is changedParameters:{lineString, polygon}
completeIn manual mode, an event is triggered when the buffer is completedParameters:{lineString, polygon}
closeTriggered when the close operation is clickedMapMouseEvent
mouseenterTriggered when the mouse enters the buffer-
mouseleaveTriggered when the mouse leaves the buffer-

SLOTS

NameDescription

METHODS

NameDescriptionDefinition