bufferPaints
生成缓冲区图层的默认 fill / line paint 对象，统一主色与不透明度。
简介
bufferPaints 按主色、填充不透明度与描边宽度生成一对 fill / line paint 对象，供缓冲区的填充层与描边层复用。MapboxBufferCircle 等缓冲区组件的默认样式即来自它，也可单独用于自绘的缓冲区图层。
从 @movk/mapbox/utils/buffer 导入（非自动导入）。
用法
把 bufferPaints 的输出分别绑定到 fill / line 图层：
<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.32 * 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
No recent changes