Question

<html>
      <head>
        <title>Single Image WMS</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <script>
          var layers = [
            new ol.layer.Tile({
              source: new ol.source.OSM()
    		  new ol.layer.Image({
              //extent: [-13884991, 2870341, -7455066, 6338219],
              source: new ol.source.ImageWMS({
                url: '//',
                params: {'LAYERS': '//'},
                ratio: 1,
                serverType: 'geoserver'
              })
            }),
            new ol.layer.Image({
              //extent: [-13884991, 2870341, -7455066, 6338219],
              source: new ol.source.ImageWMS({
                url: '//',
                params: {'LAYERS': '//'},
                ratio: 1,
                serverType: 'geoserver'
              })
            }),
    		new ol.layer.Image({
              //extent: [-13884991, 2870341, -7455066, 6338219],
              source: new ol.source.ImageWMS({
                url: '//',
                params: {'LAYERS': '//'},
                ratio: 1,
                serverType: 'geoserver'
              })
            }),
    		new ol.layer.Image({
              //extent: [-13884991, 2870341, -7455066, 6338219],
              source: new ol.source.ImageWMS({
                url: '//',
                params: {'LAYERS': '//'},
                ratio: 1,
                serverType: 'geoserver'
              })
            }),
    		new ol.layer.Image({
              //extent: [-13884991, 2870341, -7455066, 6338219],
              source: new ol.source.ImageWMS({
                url: '//',
                params: {'LAYERS': '//'},
                ratio: 1,
                serverType: 'geoserver'
              })
            }),
    		
    		new ol.layer.Image({
              //extent: [-13884991, 2870341, -7455066, 6338219],
              source: new ol.source.ImageWMS({
                url: '//s',
                params: {'LAYERS': '//'},
                ratio: 1,
                serverType: 'geoserver'
              })
            }),
    		
    		new ol.layer.Image({
              //extent: [-13884991, 2870341, -7455066, 6338219],
              source: new ol.source.ImageWMS({
                url: '//',
                params: {'LAYERS': '//'},
                ratio: 1,
                serverType: 'geoserver'
              })
            })
          ];
    	  
          var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
              center: ol.proj.fromLonLat([73.6608, 29.8820]),
              zoom: 9
            })
          });
    	  
        </script>
      </body>
    </html>

所有图层必须是复选框的形式，在选中框时，必须将以下内容添加到地图中？所有图层必须是复选框的形式，在选中框时，必须将以下内容添加到地图中？所有图层必须是复选框的形式，在选中框时，必须将以下内容添加到地图中？

Answer 1

你需要先（Layer Switcher Control）js + css，你可以从这个链接下载它们：

https://github.com/GitiFarazPishro/ol3-ext/tree/gh-pages/control

然后您可以在控制切换器中定义您的图层，如下所示：

//for the baselayer
       var Base = {}

    Base['1'] = new ol.layer.Tile({
        source: new ol.source.OSM(),
        baseLayer: true,
        displayInLayerSwitcher: true,
        visible: true,
        title: "Base Layer"
    });

//for the other layers:

    var questionLayers = {};

    questionLayers['1'] =  new ol.layer.Tile({
        source: new ol.source.OSM(),
        visible: false,
        title: "1"
    });

    questionLayers['2'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "2"
    });

    questionLayers['3'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "3"
    });

    questionLayers['4'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "4"
    });

    questionLayers['5'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "5"
    });

    questionLayers['6'] =  new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "6"
    });
    questionLayers['7'] =   new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "7"
    });

    questionLayers['8'] = new ol.layer.Image({
        //extent: [-13884991, 2870341, -7455066, 6338219],
        source: new ol.source.ImageWMS({
            url: http://someurl
            params: {},
            ratio: 1,
            serverType: 'geoserver',
        }),
        visible: false,
        title: "8"
    });

    var stack = new ol.layer.Group({
        title: 'Question Layers',
        openInLayerSwitcher: false,
        visible: false,
        layers: Object.values(questionLayers)});

定义您的地图＆amp;控制：

// this function to take the layers as array and add them into the switcher
        function LayersToArray(layer) {
                var array = [];
                for( key in layer)
                 array[array.length]= layer[key];
                return array;
            }

        var map = new ol.Map({
                    target: 'map',
                    logo:false,
                    view: new ol.View({
                  center: ol.proj.fromLonLat([73.6608, 29.8820]),
                  zoom: 9
                    }),

                 controls: ol.control.defaults().extend([
                        new ol.control.LayerSwitcher,
    ]),
                    layers:  LayersToArray(Base).concat( [stack] )

                });

你的地图应该是这样的：

Answer 2

如果您想自定义自己的图层切换器，可以沿着这条路径做点什么

// adding layer into variable
var osmBasic = new ol.layer.Tile({
  source: new ol.source.OSM()
});
// adding/removing layer
$('#customCheck1').on('change', function() {
  var isChecked = $(this).is(':checked');
  if (isChecked) {
    map.addLayer(osmBasic)
  } else {
    map.removeLayer(osmBasic);
  }
})

这是一个例子： https://jsfiddle.net/Svinjica/tqoLaLx8/

如何通过复选框在打开的图层上添加图层？

2 个答案: