我有三个图层,我想为三个图层只创建一个不透明度滑块。我已经完成了一些代码,但它只适用于单层的单个不透明度滑块。我想在一个不透明度滑块中显示所有三个图层。 / p>
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);
});
});
我的代码中是否有遗漏。这是一层不透明度的代码,谢谢。