[英]Javascript + OpenLayers 3: Multiple layers selection
我正在尝试使用OpenLayers 3创建有关WMS地图的简单网页。我加载了一些图层,我希望用户能够选择在地图上可见的一个或多个图层。 我的jsfiddle可在这里https://jsfiddle.net/liostse/9dfccgxq/3/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="css/green.css">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="js/tether.min.js" type="text/javascript"></script>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
visible1 = true;
visible2 = false;
visible3 = false;
function myChecked() {
var a =5;
if (document.getElementById("layer1").checked == true) {
visible1 = true
} else {visible1 = false};
if (document.getElementById("layer2").checked == true) {
visible2 = true
} else {visible2 = false};
if (document.getElementById("layer3").checked == true) {
visible3 = true
} else {visible3 = false};
};
</script>
</head>
<body>
<div class="container">
<div id='webmap' class="tabcontent" style="position:relative;">
<div id="layers" style="width:70%;height:600px;display:inline-block;" >
<script>
function wms(){
var baselayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var layer1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://88.99.13.199:8080/geoserver/agristats/wms',
params: {'LAYERS': 'agriculture:reforestable','STYLES':'reforestable','TILED': true},
serverType: 'geoserver'
}), visible: visible1
});
var layer2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://88.99.13.199:8080/geoserver/agristats/wms',
params: {'LAYERS': 'agriculture:corine_coniferous','STYLES':'coniferous','TILED': true},
serverType: 'geoserver'
}), visible: visible2
});
var layer3 = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://88.99.13.199:8080/geoserver/agristats/wms',
params: {'LAYERS': 'agriculture:corine_fruitsberries','STYLES':'fruitsberries','TILED': true},
serverType: 'geoserver'
}), visible: visible3
});
var map = new ol.Map({
layers: [baselayer, layer1,layer2,layer3],
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({units: 'metric'}),
new ol.control.FullScreen()
]),
target: 'layers',
view: new ol.View({
center: [2687148, 4556999],
zoom: 6.5
})
});
};
wms();
</script>
</div>
<div style="display:inline-block;position:absolute;top:0px;">
<h5 style="height:40px;position:relative;">Περιοχές παρέμβασης</h5>
<label style="height:20px;display:block;position:relative;font-size:12px;" class="checkbox"><input onclick="myChecked()" type="checkbox" id="layer1" checked />Reforestable</label>
<label style="height:20px;display:block;position:relative;font-size:12px;" class="checkbox"><input onclick="myChecked()" type="checkbox" id="layer2"/>Coniferous</label>
<label style="height:20px;display:block;position:relative;font-size:12px;" class="checkbox"><input onclick="myChecked()" type="checkbox" id="layer3"/>Fruits and berries</label>
</div>
</div>
<div style="height:50px;"></div>
</div>
</body>
</html>
我对此进行了很多搜索,但未能成功实现。 一种简单的方法是在上面的代码中,但是选择不起作用。 任何帮助都感激不尽。
更新-------------------- 解决方案
$('body').on('change','#layer1',function(){
var isChecked = $(this).is(':checked');
if (isChecked) {map.addLayer(layer1);}
else {map.removeLayer(layer1);};
map.renderSync(3000);
});
最近,我提供了有关添加/删除图层的简单解决方案
像这样:
$('#customCheck1').on('change', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
map.addLayer(osmBasic)
} else {
map.removeLayer(osmBasic);
}
})
这是jsfiddle进行进一步分析。
实际上,您可以使用setVisible
设置图层的可见性。 无需花费很多代码,就可以这样进行:
var visible1 = true;
var visible2 = false;
var visible3 = false;
function myChecked() {
//var a = 5;
if (document.getElementById("layer1").checked == true) {
visible1 = true
layer1.setVisible(visible1)
} else {
visible1 = false
layer1.setVisible(visible1)
}
if (document.getElementById("layer2").checked == true) {
console.log('2')
visible2 = true
layer2.setVisible(visible2)
} else {
visible2 = false
layer2.setVisible(visible2)
}
if (document.getElementById("layer3").checked == true) {
visible3 = true;
layer3.setVisible(visible3)
} else {
visible3 = false;
layer3.setVisible(visible3)
}
}
检查这个小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.