javascript - 如何在 Open Layers 3 中使用一个不透明度 slider 为三层创建不透明度？

Question

我有三个图层，我只想为三个图层创建一个不透明度 slider 。我已经完成了一些代码，但它仅适用于单个图层的单个不透明度 slider 。我想在一个不透明度 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);
                            });
                        });

我的代码中是否有任何遗漏。这是一层不透明度的工作代码，谢谢。

Answer 1

这个问题在 Viglino 的帮助下得到了解决。 请检查以下 Viglino OL3-GitHub 存储库上的链接。 Github Link