[英]How to create opacity for three layers using one opacity slider in Open Layers 3?
我有三层,我只想为三层创建一个不透明度滑块。我已经完成了一些代码,但仅适用于单层的单个不透明度滑块。我想在一个不透明度滑块中显示所有三层。
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存储库上的以下链接。 Github链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.