首页 / OpenLayers / API 文档

CircleStyle

先看结论

点符号，类名为 ol.style.Circle。只在屏幕空间画一个圆，半径以像素计，与地图缩放无关。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.style.Circle(options)

构造参数

参数	说明
`radius`	半径，像素，必填
`fill`	`ol.style.Fill` 填充色
`stroke`	`ol.style.Stroke` 描边，做白色外圈常用
`displacement`	相对要素位置的像素偏移 `[dx, dy]`
`rotation`	旋转弧度，圆看不出来，用在图标上才有意义
`scale`	缩放倍数，可用于悬浮放大效果
`rotateWithView`	是否随地图旋转，默认 false
`declutterMode`	避让模式，可选 `'declutter'`、`'obstacle'`、`'none'`

var markerStyle = new ol.style.Circle({
  radius: 7,
  fill: new ol.style.Fill({ color: '#d0453a' }),
  stroke: new ol.style.Stroke({ color: '#ffffff', width: 2 })
});

feature.setStyle(new ol.style.Style({ image: markerStyle }));

和 ol.geom.Circle 不是一回事

	`ol.style.Circle`	`ol.geom.Circle`
用途	点要素的符号	面要素的几何体
半径单位	像素	地图单位（米）
缩放下	大小不变	随地图缩放变化
可否量算	不能	能，有面积和半径

需要“真实半径 500 米的缓冲区”时用几何圆；需要“地图上的一个标记点”时用样式圆。名字一样，用途完全不同，这是 OpenLayers 里容易混淆的一处。

按属性调整半径

半径在构造时确定，运行时只能通过 setRadius 修改实例本身。样式函数里要按要素区分大小，应该返回不同的实例，而不是共享一个再改：

function styleFunction(feature) {
  var count = feature.get('count') || 1;
  var radius = Math.min(18, 4 + Math.sqrt(count) * 2);

  return new ol.style.Style({
    image: new ol.style.Circle({
      radius: radius,
      fill: new ol.style.Fill({ color: count > 20 ? '#b8241c' : '#1f5fd0' })
    })
  });
}

同一个样式实例被多个要素共用时，OpenLayers 会缓存渲染结果，性能更好。所以固定符号应提到函数外面建一次，只有随数据变化的部分才在函数里创建。

偏移与文字配合

displacement 让圆点偏离真实位置，用于避让文字或密集点位。偏移是像素单位，不随缩放变化，所以在大比例尺下视觉偏移会显得更远。

new ol.style.Circle({
  radius: 5,
  fill: new ol.style.Fill({ color: '#1f5fd0' }),
  displacement: [0, -8]     // 向上偏 8 像素，给文字让位
});

引用本文

经纬志（2026）。《CircleStyle》。https://www.jingweizhi.com/openlayers/api/circle-style.html（访问日期 2026-11-03）。