Javascript 如何在开放层3中使用一个不透明度滑块为三个层创建不透明度?
我有三个层,我只想为三个层创建一个不透明度滑块。我做了一些代码,但它只适用于单个层的单个不透明度滑块。我想在一个不透明度滑块中显示所有三个层Javascript 如何在开放层3中使用一个不透明度滑块为三个层创建不透明度?,javascript,css,html,openlayers-3,opacity,Javascript,Css,Html,Openlayers 3,Opacity,我有三个层,我只想为三个层创建一个不透明度滑块。我做了一些代码,但它只适用于单个层的单个不透明度滑块。我想在一个不透明度滑块中显示所有三个层 var layout =new ol.layer.Group({ title:'layout', layers: [ new ol.layer.Tile({
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);
});
});
我的代码中是否缺少任何内容。这是一层不透明的工作代码,谢谢。这个问题在Viglino的帮助下得到了解决。 请查看Viglino OL3 GitHub存储库的以下链接。
您应该提供一个任何人都知道的解决方案。