---
title: "bufferPaints"
description: "生成缓冲区图层的默认 fill / line paint 对象，统一主色与不透明度。"
seo_title: "bufferPaints"
seo_description: "Build default fill and line paint objects for buffer layers from a shared color, fill opacity and line width."
canonical_url: "https://mapbox.mhaibaraai.cn/docs/utils/buffer"
---
# bufferPaints

> 生成缓冲区图层的默认 fill / line paint 对象，统一主色与不透明度。

## 简介

`bufferPaints` 按主色、填充不透明度与描边宽度生成一对 `fill` / `line` paint 对象，供缓冲区的填充层与描边层复用。`MapboxBufferCircle` 等[缓冲区组件](/docs/layers/buffer-circle)的默认样式即来自它，也可单独用于自绘的缓冲区图层。

从 `@movk/mapbox/utils/buffer` 导入（非自动导入）。

## 用法

把 `bufferPaints` 的输出分别绑定到 fill / line 图层：

```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()`

生成缓冲区默认 paint。

**options.color** (`string`): 主色（同时用于 fill 与 line），默认 '#3b82f6'。

**options.fillOpacity** (`number`): 填充不透明度，默认 0.25。

**options.lineWidth** (`number`): 描边宽度，默认 2。

返回 `{ fill, line }`：分别为填充层与描边层的 paint 对象，可直接绑定到 `<MapboxLayer>` 的 `paint`。

## 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](/sitemap.md) for all pages.