基于OpenLayers添加滑动条来控制图层透明度

最新推荐文章于 2023-03-23 19:28:16 发布

zhang9221

最新推荐文章于 2023-03-23 19:28:16 发布

阅读量1.3k

点赞数

文章标签： html css javascript webview intellij-idea

本文链接：https://blog.csdn.net/zhang9221/article/details/121906838

版权

在项目实践中，我们会在地图上叠加栅格图层，我们希望可以在用户端控制图层的透明度来动态显示栅格图层，

首先，在页面中图层按钮的位置添加一个透明度调节按钮

<label>
    <input id="opacity" type="range" min="0" max="100" value="80" />
    (<span id="output"></span> %,opacity)
</label>

接下来，我们编辑main.js代码:我们假定声明的图层名称是GridLayer3

//var一个栅格图层GridLayer3，来源于geoserver的WMS服务

var GridLayer3 = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        id:"ying",
        ratio:1,
        projection: 'EPSG:4326',
        url: 'http://localhost:8086/geoserver/webgis/wms', //Geoserver的wms地址，用户可以根据需求而改变
        params: {
            'FORMAT': format,
            'VERSION': '1.1.0',
            "LAYERS": 'webgis:2_picture', //图层名称，用户可以根据需求而改变
            "exceptions": 'application/vnd.ogc.se_inimage',
        }
    }),

 //设置图层是否优先可见  
 visible: false
});

然后，我们添加主要代码：

GridLayer3.on('prerender', function (evt) {
    // use opaque background to conceal DEM while fully opaque imagery renders
    if (GridLayer3.getOpacity() === 1) {
        evt.context.fillStyle = 'white';
        evt.context.fillRect(
            0,
            0,
            evt.context.canvas.width,
            evt.context.canvas.height
        );
    }
});

const control4 = document.getElementById('opacity');
const output = document.getElementById('output');
const listener = function () {
    output.innerText = control4.value;
    GridLayer3.setOpacity(control4.value / 100);
};
control4.addEventListener('input', listener);
control4.addEventListener('change', listener);
output.innerText = control4.value;
GridLayer3.setOpacity(control4.value / 100);

注意control不要重复使用，这里使用control4

这样，就可以实现我们想要的功能了，当然这只是最初级的，还可以根据自己的需要进行扩展，欢迎大家提出自己的优化方案。