OpenLayers中如何计算多图层叠加后的实际显示颜色？

问题场景 #

我在OpenLayers中创建了2个带透明度的矢量图层（图层透明度均设为0.7）：

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: function (feature) {
        return new ol.style.Style({
            fill: new ol.style.Fill({
                color: /* 从数据获取颜色的函数 */
            }),
            stroke: new ol.style.Stroke({
                color: 'rgb(23, 23, 23)',
                width: 0.5
            }),
        });
    }
});

vectorLayer.setOpacity(0.7)

同时创建了1个无透明度的白色底层矢量图层：

var finalLayer = new ol.layer.Vector({
    source: vectorSource,
    style: function (feature) {
        return new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgb(255, 255, 255)'
            }),
            stroke: new ol.style.Stroke({
                color: 'rgb(23, 23, 23)',
                width: 0.5
            }),
        });
    }
});

三个图层叠加后形成最终显示颜色，我尝试用以下公式计算，但结果与地图实际显示不一致：

R = R1 + (R2 - R1) * Alfa / 255; 
G = G1 + (G2 - G1) * Alfa / 255; 
B = B1 + (B2 - B1) * Alfa / 255;

现有条件 #

已将两个带透明度图层的颜色存储为要素属性，可通过以下代码获取：

var color1 = feature.get('color1').match(/\d+(\.\d+)?/g).map(Number)
var color2 = feature.get('color2').match(/\d+(\.\d+)?/g).map(Number)

需求 #

需在以下selectStyle中正确计算并返回图层叠加后的颜色：

const selectStyle = new ol.style.Style({
    fill: new ol.style.Fill({
        color: function (feature) {
            var color1 = feature.get('color1').match(/\d+(\.\d+)?/g).map(Number)
            var color2 = feature.get('color2').match(/\d+(\.\d+)?/g).map(Number)
            return rgb(???);
        },
    }),
    stroke: new ol.style.Stroke({
        color: 'rgba(30, 210, 255)',
        width: 1,
    }),
});

解决方案 #

图层叠加的颜色计算需遵循Alpha混合公式，OpenLayers中图层的opacity是0-1的数值（无需除以255）。假设图层叠加顺序为：底层finalLayer（白色）→ 第一个带透明度图层（color1）→ 第二个带透明度图层（color2），正确的计算代码如下：

const selectStyle = new ol.style.Style({
    fill: new ol.style.Fill({
        color: function (feature) {
            const color1 = feature.get('color1').match(/\d+(\.\d+)?/g).map(Number);
            const color2 = feature.get('color2').match(/\d+(\.\d+)?/g).map(Number);
            const opacity = 0.7; // 两个带透明度图层的opacity值
            const baseColor = [255, 255, 255]; // 底层finalLayer的颜色

            // 第一步：混合底层与第一个带透明度图层
            const mixR1 = baseColor[0] * (1 - opacity) + color1[0] * opacity;
            const mixG1 = baseColor[1] * (1 - opacity) + color1[1] * opacity;
            const mixB1 = baseColor[2] * (1 - opacity) + color1[2] * opacity;

            // 第二步：混合第一步结果与第二个带透明度图层
            const finalR = Math.round(mixR1 * (1 - opacity) + color2[0] * opacity);
            const finalG = Math.round(mixG1 * (1 - opacity) + color2[1] * opacity);
            const finalB = Math.round(mixB1 * (1 - opacity) + color2[2] * opacity);

            return `rgb(${finalR}, ${finalG}, ${finalB})`;
        },
    }),
    stroke: new ol.style.Stroke({
        color: 'rgba(30, 210, 255)',
        width: 1,
    }),
});

说明 #

1. 如果图层叠加顺序是finalLayer→color2→color1，只需交换代码中color1和color2的混合顺序即可。
2. 若图层颜色本身包含alpha通道（即color1/color2是rgba格式），则需要将颜色自身的alpha与图层opacity相乘后再参与计算。

内容的提问来源于stack exchange，提问作者baeko