Text
Quick answer
Text is ol.style.Text, the label style controlling content, font, fill, stroke, offsets, alignment, rotation, scale and background. Use text for the string, font for a CSS shorthand, offsetX and offsetY for pixel nudges, plus backgroundFill, backgroundStroke and padding for legible boxes. Give it to Style.text inside a style function.
new ol.style.Text( options )
Key points
- Negative offsetY moves labels upward; point labels commonly use -16 to -20.
- backgroundFill, backgroundStroke and padding draw a readable box behind the glyphs.
- declutterMode and overflow control label collision handling and clipping.
Example
var label = new ol.style.Text({
text: '王府井',
font: '600 12px "PingFang SC", sans-serif',
fill: new ol.style.Fill({ color: '#16181d' }),
stroke: new ol.style.Stroke({ color: '#ffffff', width: 3 }),
offsetY: -16,
overflow: true
});var labelTemplate = new ol.style.Text({
font: '500 12px sans-serif',
fill: new ol.style.Fill({ color: '#16181d' }),
stroke: new ol.style.Stroke({ color: '#ffffff', width: 3 }),
offsetY: -15
});
function styleFunction(feature) {
var text = labelTemplate.clone();
text.setText(feature.get('name') + ' · ' + feature.get('code'));
return new ol.style.Style({
image: new ol.style.Circle({ radius: 5 }),
text: text
});
}Notes
- Offsets are pixels, so labels overlap when zooming out unless the layer enables declutter.
- An empty text string renders nothing, and a background without padding hugs the glyphs.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Text. https://www.jingweizhi.com/en/openlayers/api/text.html (accessed 2026-11-03).