经纬志
首页 / OpenLayers / API 文档

WebGLPoints

先看结论

GPU 点图层。十万级以上的点用 Canvas 矢量图层会卡在重绘上， 这一层把点位写进缓冲区，用一次绘制调用画完。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-29 · 引用本文
new ol.layer.WebGLPoints({ source, style, ... })

构造参数

参数默认说明
source—矢量数据源，要素的几何会被当作点位读取
style—扁平样式对象，键名见下表
disableHitDetectionfalse关闭拾取；关闭后 forEachFeatureAtPixel 不再命中该层
className'ol-layer'容器 DOM 的类名
opacity / visible / zIndex—与其他图层一致

常用样式键

键说明
circle-radius点位半径，像素
circle-fill-color填充色，支持 rgba()
circle-opacity填充透明度，0 到 1
circle-stroke-width描边宽度
circle-stroke-color描边颜色
circle-displacement像素偏移，[x, y]

值可以是常量，也可以是表达式数组：['get', 'level'] 取属性， ['*', ['get', 'level'], 2] 做运算，['match', ...] 做分支。

示例

var layer = new ol.layer.WebGLPoints({
  source: new ol.source.Vector({ features: points }),
  style: {
    'circle-radius': ['*', ['get', 'magnitude'], 1.6],
    'circle-fill-color': [
      'match',
      ['get', 'level'],
      'high', 'rgba(214, 65, 65, 0.75)',
      'mid',  'rgba(233, 160, 46, 0.7)',
      'rgba(64, 132, 214, 0.65)'
    ],
    'circle-stroke-width': 1,
    'circle-stroke-color': 'rgba(255, 255, 255, 0.8)'
  },
  disableHitDetection: false,
  opacity: 0.95
});

能做什么，不能做什么

支持圆点以及与圆点等价的简单图形，支持按属性设置大小、颜色与透明度。 不支持逐要素的文字标注、图片图标与复杂路径样式。 需要标注时，常见做法是同时加一个矢量图层只放少量关键点， 其余海量点交给 WebGL 层。

与 Heatmap 的分工

ol.layer.Heatmap 把点密度渲染成模糊色块，丢掉了单个点的位置感； WebGLPoints 保留每个点的轮廓，适合需要辨认具体位置的场景。 两者都依赖 WebGL，回退方案是降低数据量而不是换渲染器。

表达式在着色器里逐顶点执行。['get', 'attr'] 读取的是要素属性缓冲区， 属性名必须与数据里完全一致，写成不存在的键不会报错，只会得到 0， 表现为所有点尺寸一致或颜色全黑。

引用本文

经纬志（2026）。《WebGLPoints》。https://www.jingweizhi.com/openlayers/api/webgl-points-layer.html（访问日期 2026-11-03）。