Performance: from thousands to hundreds of thousands
Quick answer
This tutorial matches rendering strategy to feature count in OpenLayers, from a few hundred features to hundreds of thousands. It introduces ol.layer.WebGLPoints with declarative expressions such as interpolate and match, disables updateWhileAnimating and updateWhileInteracting, raises renderBuffer, and caches ol.style.Style objects by category. It also applies geometry simplification, bbox loading and ol.source.Cluster. Readers can find the real bottleneck and choose an approach that scales.
Key points
- Switch to ol.layer.WebGLPoints beyond ten thousand points for a single batched draw.
- Cache Style objects in a dictionary instead of constructing them inside the style function.
- Set updateWhileInteracting false on static layers to skip redraws during drag.
Example
var pointsLayer = new ol.layer.WebGLPoints({
source: new ol.source.Vector({
url: '/data/stations.geojson',
format: new ol.format.GeoJSON()
}),
style: {
'circle-radius': [
'interpolate', ['linear'], ['get', 'flow'],
0, 3,
500, 8,
2000, 14
],
'circle-fill-color': [
'match', ['get', 'level'],
'high', '#d0453a',
'mid', '#f0a020',
'#1f5fd0'
],
'circle-opacity': 0.82,
'circle-stroke-width': 1,
'circle-stroke-color': '#ffffff'
}
});
map.addLayer(pointsLayer);var parcels = new ol.layer.Vector({
source: parcelSource,
updateWhileAnimating: false,
updateWhileInteracting: false,
declutter: false,
style: cachedStyle
});
var map = new ol.Map({
target: 'map',
layers: [base, parcels],
renderBuffer: 200,
view: view
});Notes
- WebGL layers ignore ol.style.Style entirely and render nothing when the two are mixed.
- declutter: true costs a collision check per frame and hurts with thousands of labels.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Performance: from thousands to hundreds of thousands. https://www.jingweizhi.com/en/openlayers/tutorials/performance.html (accessed 2026-11-03).