Javascript + OpenLayers 3：多层选择

Question

我正在尝试使用 OpenLayers 3 创建一个关于 WMS 地图的简单网页。我加载了一些图层，我希望用户能够 select 一个或多个图层在地图上可见。我的 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>

我对此进行了很多搜索，但未能成功实现。一种简单的方法是在上面的代码中，但 selection 不起作用。任何帮助将不胜感激。

更新-------------------- 解决方案

$('body').on('change','#layer1',function(){
                    var isChecked = $(this).is(':checked');
                    if (isChecked) {map.addLayer(layer1);} 
                    else {map.removeLayer(layer1);};
                    map.renderSync(3000);
                });

Answer 1

最近我提供了关于adding/removing层

的简单解决方案

像这样：

$('#customCheck1').on('change', function() {
  var isChecked = $(this).is(':checked');
  if (isChecked) {
    map.addLayer(osmBasic)
  } else {
    map.removeLayer(osmBasic);
  }
})

这里jsfiddle 进一步分析。

Answer 2

您实际上可以使用 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)
  }
}

检查此 Fiddle。

Javascript + OpenLayers 3：多层选择

Javascript + OpenLayers 3: Multiple layers selection

javascript

jquery

openlayers

openlayers-3