---
title: "bufferPaints"
description: "Generate default fill and line paint objects for buffer layers, unified by a primary color and opacity."
canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/utils/buffer"
---
# bufferPaints

> Generate default fill and line paint objects for buffer layers, unified by a primary color and opacity.

## Introduction

`bufferPaints` generates a pair of `fill` / `line` paint objects from a primary color, fill opacity and stroke width, intended to be reused across a buffer's fill layer and stroke layer. The default styles of buffer components such as `MapboxBufferCircle` are derived from it, but it can also be used standalone for custom-drawn buffer layers.

Import from `@movk/mapbox/utils/buffer` (not auto-imported).

## Usage

Bind the output of `bufferPaints` to a fill layer and a line layer respectively:

```vue [BufferPaintsExample.vue]
<script setup lang="ts">
import { bufferPaints } from '@movk/mapbox/utils/buffer'
import type { FeatureCollection } from 'geojson'

const center: [number, number] = [116.397, 39.908]

// 生成近似圆形缓冲区环（演示用，无需 turf）
function circle(c: [number, number], radiusKm: number, steps = 64): FeatureCollection {
  const coords: [number, number][] = []
  const dLat = radiusKm / 110.574
  const dLng = radiusKm / (111.320 * Math.cos((c[1] * Math.PI) / 180))
  for (let i = 0; i <= steps; i++) {
    const a = (i / steps) * 2 * Math.PI
    coords.push([c[0] + dLng * Math.cos(a), c[1] + dLat * Math.sin(a)])
  }
  return { type: 'FeatureCollection', features: [{ type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [coords] } }] }
}

const data = circle(center, 3)
const paints = bufferPaints({ color: '#3b82f6' })
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap :options="{ style: 'mapbox://styles/mapbox/light-v11', center, zoom: 11 }">
      <MapboxSource source-id="buffer" :source="{ type: 'geojson', data }">
        <MapboxLayer layer-id="buffer-fill" type="fill" source="buffer" :paint="paints.fill" />
        <MapboxLayer layer-id="buffer-line" type="line" source="buffer" :paint="paints.line" />
      </MapboxSource>
    </MapboxMap>
  </div>
</template>
```

## API

### `bufferPaints()`

Generate default buffer paint objects.

**options.color** (`string`): Primary color (applied to both fill and line), default '#3b82f6'.

**options.fillOpacity** (`number`): Fill opacity, default 0.25.

**options.lineWidth** (`number`): Stroke width, default 2.

Returns `{ fill, line }`: paint objects for the fill layer and stroke layer respectively, ready to be bound directly to the `paint` prop of `<MapboxLayer>`.

## Changelog

See commit history for [src/runtime/utils/bufferPaints.ts](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/utils/bufferPaints.ts).


## Sitemap

See the full [sitemap](https://mapbox.mhaibaraai.cn/sitemap.md) for all pages.