Vector layers and styling
Quick answer
This tutorial walks through the four-level OpenLayers vector structure: ol.layer.Vector, ol.source.Vector, ol.Feature and geometry classes. It shows feature get and set properties, three ways to assign styles with ol.style.Style, Fill, Stroke, Circle and Text, style functions that return arrays, and resolution-based label switching. It also explains why layer.changed is needed after mutating attributes. Readers can build attribute-driven symbology and debug styles that never refresh.
Key points
- Return an array of ol.style.Style objects to stack a symbol and label for one feature.
- Call layer.changed after changing feature attributes used by a style function.
- Add many features at once with source.addFeatures to avoid repeated redraws.
Example
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([116.404, 39.915])),
name: '王府井',
level: 'high'
});
feature.get('name'); // '王府井'
feature.set('level', 'low');feature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({ color: '#1f5fd0' }),
stroke: new ol.style.Stroke({ color: '#fff', width: 2 })
})
}));Notes
- Style functions run per feature per frame, so building new styles inside them causes GC churn.
- Polygon rings must be closed, with the outer ring counter-clockwise and holes clockwise.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Vector layers and styling. https://www.jingweizhi.com/en/openlayers/tutorials/vector-style.html (accessed 2026-11-03).