如何使用“打开图层3”中的一个不透明度滑块为三层创建不透明度？

Question

I have three layers,i want to create only one opacity slider for three layers.I have done some code but it works only for single opacity slider of single layer.I want to show all three layers in one opacity slider.

var layout =new ol.layer.Group({
                                title:'layout',
                        layers: [
                                new ol.layer.Tile({
                                  source: new ol.source.TileWMS({
                                    url: 'http://xx.xx.xxx.xxx:8080/geoserver/gwc/service/wms',
                                        hidpi: false,
                                        params: {
                                            'layers': "Raster:NR_F18_12013_india"
                                        }
                                    })
                                }),
            new ol.layer.Tile({
                                    title:'boundry',
                                    source: new ol.source.TileWMS({
                                    url: 'http://xx.xx.xxx.xxx:8080/geoserver/gwc/service/wms',
                                        hidpi: false,
                                        params: {
                                            'layers': "Raster:NR_F14_12000_India"
                                        }
                                    })
                                }),
                    new ol.layer.Tile({
                                     title:'b_90',
                                    source: new ol.source.TileWMS({
                                        url: 'http://xx.xx.xxx.xxx:8080/geoserver/gwc/service/wms',
                                        hidpi: false,
                                        params: {
                                            'layers': "Raster:NR_F10_11992_india"
                                        }
                                    })
                                })
                            ]
                    });
             var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Group({
                        'title': 'Base maps',
                        layers: [
                           new ol.layer.Tile({
                           source: new ol.source.OSM()
                            })
                                ]
                    }),layout],

                    target: 'map',
                    view: new ol.View({
                    center: ol.proj.transform([85.5639,22.6726], 'EPSG:4326', 'EPSG:3857'),
                                    zoom:5,
                                    minZoom:3,
                                    maxZoom: 70
                })
              });

              var checkbox_study = document.getElementById('visible4');
                        if(checkbox_study)
                        {
                        checkbox_study.addEventListener('change', function () {
                                layout.setVisible(this.checked);
                        });
                        }

                        function bindInputs(layerid, layer) {
                            var opacityInput = $(layerid + ' input.opacity');

                            opacityInput.on('input change', function () {
                                layer.setOpacity(parseFloat(this.value));
                            });
                            opacityInput.val(String(layer.getOpacity()));
                        }
                        map.getLayers().forEach(function (layer, i) {
                            bindInputs('#layer' + i, layer);
                            layer.getLayers().forEach(function (sublayer, j) {
                                bindInputs('#layer' + i + j, sublayer);
                            });
                        });

Is there any missing in my code.This is working code code for one layer opacity ,Thanks.

Answer 1

This problem is solved with help of Viglino. Please check below link on Viglino OL3-GitHub repository. Github Link