WebGLPoints
Quick answer
WebGLPoints is ol.layer.WebGLPoints, a GPU-backed layer that draws hundreds of thousands of points in one draw call from a vector source. Its flat style object uses keys such as circle-radius, circle-fill-color, circle-opacity and circle-stroke-width, which accept constants or expressions like ['get', 'level']. Use it for dense point clouds where Canvas vector rendering stalls.
new ol.layer.WebGLPoints({ source , style , ... })
Key points
- Expressions support arithmetic and match branches, evaluated per vertex in the shader.
- disableHitDetection false keeps forEachFeatureAtPixel working; true skips picking.
- Only circles and equivalent simple shapes render; text and icon images are unsupported.
Example
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
});Notes
- A missing expression attribute silently yields 0, so all points share one size or turn black.
- Per-feature labels and icons are impossible, so add a small vector layer for annotated key points.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). WebGLPoints. https://www.jingweizhi.com/en/openlayers/api/webgl-points-layer.html (accessed 2026-11-03).