Fill
Quick answer
Fill is ol.style.Fill, the paint object that colors polygon interiors, point symbol bodies, text glyphs and text background boxes. Its color option accepts CSS strings, [red, green, blue, alpha] arrays or a canvas pattern, which enables hatching and stipple effects. Attach it to Style.fill, Style.image.fill, Style.text.fill or Style.text.backgroundFill.
new ol.style.Fill( options )
Key points
- getColor and setColor read or replace the color; clone deep-copies the style.
- Semi-transparent fills between 0.1 and 0.25 alpha keep basemap detail visible underneath.
- A canvas pattern passed as color produces hatched or dotted engineering-style fills.
Example
/* 十六进制 */
new ol.style.Fill({ color: '#1f5fd0' });
/* 带透明度，第四位是 alpha */
new ol.style.Fill({ color: 'rgba(31,95,208,0.18)' });
/* 数组写法，[红, 绿, 蓝, 透明度]，取值 0-255 */
new ol.style.Fill({ color: [31, 95, 208, 0.18] });var base = [31, 95, 208, 1];
var faded = base.slice();
faded[3] = 0.2;
new ol.style.Fill({ color: faded });
/* 转成 rgba 字符串用于日志或字符界面 */
console.log(ol.color.asString(faded)); // rgba(31,95,208,0.2)Notes
- Calling setColor does not repaint by itself; call layer.changed() to force a redraw.
- A fully opaque polygon fill hides the basemap roads below it, so keep overlay alpha low.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Fill. https://www.jingweizhi.com/en/openlayers/api/fill.html (accessed 2026-11-03).