12. Circle 圆点图层
概述
Circle 图层用于渲染点要素为圆形标记，适合散点图和数据驱动的可视化。本节学习：
- Circle 图层的基本用法
- circle-radius / circle-color / circle-stroke-* 属性
- 数据驱动样式（按属性映射大小/颜色）
基本用法
map.addLayer({
id: 'points',
type: 'circle',
source: 'my-geojson',
paint: {
'circle-radius': 6,
'circle-color': '#1890ff',
'circle-stroke-width': 2,
'circle-stroke-color': '#fff'
}
})
Paint 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
circle-radius | number | 5 | 圆半径（像素） |
circle-color | color | #000000 | 填充颜色 |
circle-opacity | number | 1 | 填充透明度 |
circle-stroke-width | number | 0 | 描边宽度 |
circle-stroke-color | color | #000000 | 描边颜色 |
circle-stroke-opacity | number | 1 | 描边透明度 |
circle-blur | number | 0 | 模糊半径 |
circle-translate | [x, y] | [0, 0] | 偏移 |
数据驱动样式
按属性映射大小
paint: {
'circle-radius': [
'interpolate', ['linear'], ['get', 'magnitude'],
1, 3, // magnitude=1 → 半径 3px
5, 15, // magnitude=5 → 半径 15px
8, 30 // magnitude=8 → 半径 30px
]
}
按属性映射颜色
paint: {
'circle-color': [
'match', ['get', 'type'],
'景点', '#1890ff',
'公园', '#52c41a',
'寺庙', '#fa8c16',
'#999'
]
}
分段映射（step）
paint: {
'circle-color': [
'step', ['get', 'value'],
'#52c41a', // value < 50
50, '#faad14', // 50 ≤ value < 80
80, '#f5222d' // value ≥ 80
]
}
本课小结
- Circle 图层以圆形渲染点要素
- 支持半径、颜色、描边等属性
interpolate实现连续映射，step实现分段映射- 适合散点分布图、数据可视化
📌 上一节：11. Symbol 符号图层 📌 下一节：13. Heatmap 热力图层
