openlayers 3层可见性或不可见性

时间:2016-04-27 16:03:50

标签: javascript openlayers-3

我试图一次显示一个图层.i有多个图层试图通过复选框显示。当我检查第一层并且之后没有取消选中第一层时,我将检查另一层,所以当第一个复选框自动取消选择取消选择时我想要使用未选中的框自动删除第一层。但我无法完成这项任务。

此处的HTML代码

<label><input type="checkbox" id="landuse"  />LANDUSE</label>
<label><input type="checkbox" id="soil" />SOIL</label>
<label><input type="checkbox" id="slope" />SLOPE</label>

这是javascript

var landuseLayer = new ol.layer.Image({
     coordinates: [79.14511833527447, 20.987418098133496, 79.2018842619151, 21.050233196545],
        source: new ol.source.ImageWMS({
          url: 'http://localhost:8080/geoserver/sagy/wms',
          params: {'LAYERS': 'sagy:pachgaon_LULC_Project', transparent: true,  minScale: 8},


        }),
        visible: false
      });


      var soilLayer = new ol.layer.Image({
     coordinates: [79.14567586872208, 20.987841241731143, 79.20165306280867, 21.04983364670783],
        source: new ol.source.ImageWMS({
          url: 'http://localhost:8080/geoserver/sagy/wms',
          params: {'LAYERS': 'sagy:pachgaon_SOIL_Project', transparent: true,  minScale: 8}

        }),
        visible: false
      });

      var slopeLayer = new ol.layer.Image({
     coordinates: [79.14567586872207, 20.987841241731136, 79.20165306280867, 21.049833646707828],
        source: new ol.source.ImageWMS({
          url: 'http://localhost:8080/geoserver/sagy/wms',
          params: {'LAYERS': 'sagy:pachgaon_SLOPE_Project', transparent: true,  minScale: 8}

        }),
        visible: false
      });

var map = new ol.Map({
  layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
          }),landuseLayer,soilLayer, GWPLayer, GPLayer, slopeLayer, transportationLayer, drainageLayer, vector, vectorLayer],
target: document.getElementById('map'),

            view: new ol.View({
            Projection: 'EPSG:4326',
                center: ol.proj.fromLonLat([79.17436, 21.01668]),
  zoom: 5
                                }),
        });
$('input[type=checkbox]').on('change', function() {
var lyrname;
  var layer = {
    landuse: landuseLayer,
    soil: soilLayer,
    slope: slopeLayer,

  }[$(this).attr('id')];
  var extent = map.getView().calculateExtent(map.getSize());
 lyrname = $(this).attr('id');

if(document.getElementById(lyrname).checked)
{
$('input[type="checkbox"]').not(this).prop('checked',false);
$activeDialogs = $(".ui-dialog:visible").find('.ui-dialog-content');
$activeDialogs.dialog('close');
layer.setVisible(true);
map.getView().setZoom(13);
$('.image1').css('visibility', 'visible');
 if(lyrname== 'landuse'){

$('.image1').css('visibility', 'visible');
$("#dialog").dialog("open");
 }

 else if (lyrname=='soil')
{
$("#dialog1").dialog("open");

}
}else {
          $activeDialogs = $(".ui-dialog:visible").find('.ui-dialog-content');
           $activeDialogs.dialog('close');

            layer.setVisible(false);
        }
});
如果您对如何阻止WMSlayers的重叠有任何想法,请帮助我。

0 个答案:

没有答案