MapboxBufferCircle

圆形缓冲区，基于 turf 测地圆按米半径生成填充与描边图层。

简介

MapboxBufferCircle 以圆心与米半径生成 turf 测地圆，渲染为填充 + 描边两层。color 提供快捷配色，fillPaint / linePaint 可整体覆盖样式。

用法

拖动滑块调整半径（米）：

半径 2000m

<script setup lang="ts">
const center: [number, number] = [116.397, 39.908]
const radius = ref(2000)
</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 }">
      <div
        class="absolute left-3 top-3 z-10 flex items-center gap-2 rounded-(--ui-radius) border border-default bg-default/80 px-3 py-1.5 backdrop-blur"
      >
        <span class="text-sm text-muted">半径 {{ radius }}m</span>
        <USlider v-model="radius" :min="500" :max="5000" :step="500" class="w-32" />
      </div>
      <!-- turf 测地圆，半径单位米 -->
      <MapboxBufferCircle :center="center" :radius="radius" color="#3b82f6" />
    </MapboxMap>
  </div>
</template>

API

Props

Prop	Default	Type
`center`		`[number, number]` 圆心经纬度
`radius`		`number` 半径（米）
`steps`	`64`	`number` 圆周采样段数
`layerId`		`string` 图层 id 前缀；省略时自动生成
`color`		`string` 主色（快捷样式）
`fillPaint`		`Record<string, unknown>` 整体覆盖填充 paint
`linePaint`		`Record<string, unknown>` 整体覆盖描边 paint
`beforeId`		`string` 插入到该图层之前

Changelog

No recent changes

MapboxRasterLayer

栅格瓦片图层，叠加 XYZ/TMS 模板的外部瓦片服务。

MapboxBufferEllipse

椭圆缓冲区，按米半轴与方位角生成填充与描边图层。