首页 / OpenLayers / API 文档
Fill
先看结论
填充样式。给面和点符号内部上色，颜色可以带透明度，也可以用图片做图案填充。
new ol.style.Fill(options)
构造参数
| 参数 | 说明 |
|---|---|
color | 颜色字符串或 [红, 绿, 蓝, 透明度] 数组 |
/* 十六进制 */
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] });
字符串颜色支持 CSS 的全部语法，包括 hsl()、
#1f5fd080 这种八位十六进制。数组与字符串可以混用，
内部统一转成同一种表示。
常用方法
| 方法 | 说明 |
|---|---|
getColor() | 取当前颜色 |
setColor(c) | 换色，需配合图层重绘才生效 |
clone() | 复制，修改副本不影响原样式 |
颜色对应的几何
同一个 ol.style.Fill 可以给不同类型的样式字段使用，
含义随字段变化：
| 使用位置 | 填充对象 |
|---|---|
Style.fill | 面的内部 |
Style.image.fill | 点符号内部 |
Style.text.fill | 文字颜色 |
Style.text.backgroundFill | 文字背景块 |
叠加在底图上的面，透明度建议在 0.1 到 0.25 之间。 完全不透明的面会遮住底图路网，用户看不出面下面是哪里。 半透明的面既能看到范围，也能看到底图细节。
颜色对象
需要计算颜色时用 ol.color 提供的函数，
避免手写字符串拼接：
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)图案填充
color 也可以接受一个 canvas 图案。
先把图案画到离屏 canvas，再作为颜色传入，
就能做斜线、点阵这类工程图式填充：
var pattern = document.createElement('canvas');
pattern.width = 8;
pattern.height = 8;
var ctx = pattern.getContext('2d');
ctx.strokeStyle = '#1f5fd0';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, 8);
ctx.lineTo(8, 0);
ctx.stroke();
new ol.style.Fill({ color: ctx.createPattern(pattern, 'repeat') });经纬志（2026）。《Fill》。https://www.jingweizhi.com/openlayers/api/fill.html（访问日期 2026-11-03）。