Javascript + OpenLayers 3: выбор нескольких слоев - PullRequest
Новая
       6

Javascript + OpenLayers 3: выбор нескольких слоев

0 голосов
/ 08 мая 2018

Я пытаюсь создать простую веб-страницу о карте WMS с помощью OpenLayers 3. Я загружаю несколько слоев и хочу, чтобы пользователь мог выбрать один или несколько слоев, видимых на карте. Мой 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>

Я много искал об этом, но не смог заставить его работать. Один простой подход - в приведенном выше коде, но выбор не работает. Любая помощь будет высоко ценится.

UPDATE -------------------- РЕШЕНИЕ 

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

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

Вы действительно можете установить видимость слоя, используя 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)
  }
}

Проверьте это Скрипка .

0 голосов
/ 08 мая 2018

Недавно я предоставил простое решение относительно добавления / удаления слоев

Примерно так: 

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

Вот jsfiddle для дальнейшего анализа.

...