openlayers结合input标签的range滑块来调整图层透明度

//首先这是图层的样式，加载要素时根据Properties里的layer_name字段来加载不同样式
var styles = {
    'layer1': [new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: [255, 255, 153, 0.5],
            width: 3
        }),
        fill: new ol.style.Fill({
            color: [255, 255, 153, 1]
        })

    })],
    'layer2': [new ol.style.Style({
        stroke: new ol.style.Stroke({
            // color: [255, 255, 255, 0.5],
            color: [204, 255, 204, 0.5],
            width: 3
        }),
        fill: new ol.style.Fill({
            color: [204, 255, 204, 1]
        })

    })]
};
var styleFunction = function (feature) {
    return styles[feature.getProperties()["layer_name"]];
};
layer.setStyle(styleFunction)
//加载透明度图层函数
function setOpacity(type, color) {
    //获取图层要素
    var source = layer.getSource().getFeatures();
    for (var i = 0; i < source.length; i++) {
		//获取要素中的type属性，
        var name = source[i].O.layer_name;
        if (name == type) {
            source[i].setStyle(new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: color,
                        width: 1
                    }),
                    fill: new ol.style.Fill({
                        color: color
                    })
                })
            );
        }
    }
}

//样式加载完毕，开始加入滑块事件
$("#input .range").on("input", function () {
    var value = $(this).val();
    var opacity_color = 1 - value / 100;
    var layer_name = $(this).parents("li").find(".layer_name").attr("id");
    if (layer_name == "layer1") {
        setOpacity(layer_name, [204, 255, 204, opacity_color]);
    } else if (layer_name == "layer2") {
        setOpacity(layer_name, [51, 102, 204, opacity_color]);
    }
});

转载自：https://blog.csdn.net/du_5pet/article/details/86705035