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

最新推荐文章于 2025-07-13 16:25:38 发布

肆爪

最新推荐文章于 2025-07-13 16:25:38 发布

阅读量924

点赞数

CC 4.0 BY-SA版权

分类专栏： openlayers

本文链接：https://blog.youkuaiyun.com/du_5pet/article/details/86705035

openlayers 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何结合OpenLayers库与HTML的input标签类型为range的滑块，实现动态调整地图图层的透明度。通过监听滑块的改变事件，实时更新图层的opacity属性，达到交互式控制地图视觉效果的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//首先这是图层的样式，加载要素时根据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]);
    }
});