circle
用 MapboxLayer 的 circle 类型渲染圆点图层，经内联 geojson 源与 paint 控制半径、颜色与描边。
简介
MapboxLayer 设 type="circle" 即渲染圆点图层。下例用内联 source 传入 geojson，经 paint 控制半径、颜色与描边；调整控件时 paint 响应式变更仅触发 setPaintProperty 增量更新。
用法
<script setup lang="ts">
import type { FeatureCollection } from 'geojson'
const props = withDefaults(
defineProps<{
radius?: number
color?: string
}>(),
{
radius: 10,
color: '#f43f5e'
}
)
const data: FeatureCollection = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: { type: 'Point', coordinates: [116.397, 39.908] }
},
{ type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [116.45, 39.93] } },
{ type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: [116.35, 39.88] } }
]
}
// paint 随 props 响应：仅触发 setPaintProperty 增量更新，不重建图层
const paint = computed(() => ({
'circle-radius': props.radius,
'circle-color': props.color,
'circle-stroke-width': 2,
'circle-stroke-color': '#fff'
}))
</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: [116.4, 39.9], zoom: 11 }"
>
<MapboxLayer
layer-id="points"
type="circle"
:source="{ type: 'geojson', data }"
:paint="paint"
/>
</MapboxMap>
</div>
</template>
示例
数据驱动样式
paint 用表达式按要素属性分级映射，实现数据驱动的半径与颜色：
<script setup lang="ts">
import type { FeatureCollection } from 'geojson'
// 每个点带 value 属性，paint 用表达式按属性分级映射半径与颜色
const data: FeatureCollection = {
type: 'FeatureCollection',
features: Array.from({ length: 40 }, (_, i) => ({
type: 'Feature',
properties: { value: (i * 37) % 100 },
geometry: {
type: 'Point',
coordinates: [116.2 + ((i * 13) % 40) / 100, 39.8 + ((i * 29) % 25) / 100]
}
}))
}
const paint = {
'circle-radius': ['interpolate', ['linear'], ['get', 'value'], 0, 4, 100, 20],
'circle-color': [
'interpolate',
['linear'],
['get', 'value'],
0,
'#3b82f6',
50,
'#f59e0b',
100,
'#ef4444'
],
'circle-opacity': 0.85
}
</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: [116.4, 39.9], zoom: 10 }"
>
<MapboxLayer
layer-id="graduated"
type="circle"
:source="{ type: 'geojson', data }"
:paint="paint"
/>
</MapboxMap>
</div>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
layerId | string图层 id，全局唯一 | |
type | "symbol" | "fill" | "line" | "circle" | "heatmap" | "fill-extrusion" | "building" | "raster" | "raster-particle" | "hillshade" | "model" | "background" | "sky" | "slot" | "clip"图层类型，决定渲染方式与可用的 paint / layout 属性 | |
source | string | mapboxgl.VectorSourceSpecification | mapboxgl.RasterSourceSpecification | mapboxgl.RasterDEMSourceSpecification | mapboxgl.RasterArraySourceSpecification | mapboxgl.GeoJSONSourceSpecification | mapboxgl.VideoSourceSpecification | mapboxgl.ImageSourceSpecification | mapboxgl.ModelSourceSpecificationsource id 字符串引用，或内联 source 对象（自动创建匿名源并随图层卸载） | |
sourceLayer | string矢量瓦片源内的子图层名（source-layer），消费矢量源时必填 | |
paint | PropBag绘制样式属性，响应式变更经 setPaintProperty 增量下发 | |
layout | PropBag布局属性，响应式变更经 setLayoutProperty 增量下发 | |
filter | mapboxgl.ExpressionSpecification | ["has", string] | ["!has", string] | ["==", string, string | number | boolean] | ["!=", string, string | number | boolean] | [">", string, string | number | boolean] | [">=", string, string | number | boolean] | ["<", string, string | number | boolean] | ["<=", string, string | number | boolean] | (string | mapboxgl.FilterSpecification)[]过滤表达式，仅渲染匹配的要素 | |
minzoom | 0 | number最小缩放级别，低于此级别不渲染 |
maxzoom | 24 | number最大缩放级别，高于此级别不渲染 |
beforeId | string插入到该 id 图层之前；省略则追加到图层栈顶部 |
Changelog
No recent changes