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

最新推荐文章于 2024-02-20 17:18:11 发布

肆爪

最新推荐文章于 2024-02-20 17:18:11 发布

阅读量867

点赞数

分类专栏： openlayers

本文链接：https://blog.csdn.net/du_5pet/article/details/86705035

版权

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

摘要由CSDN通过智能技术生成

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