[GIS] Setting multiple WMS layers over basemap of OpenLayers 3

javascriptopenlayerswms

I'm developing a web-based application. In this project I'm trying to create multiple WMS image layer over the map with legends.

As you can see below its showing the WMS layer over its basemap . This is what I am trying to get.

enter image description here

Below I have tried to displayed one sample from GeoServer and second one is for land use/land cover but i'm not able to set basemap for this layer as you can see. There is only WMS layered displayed when I checked on landuse/ landcover button.

enter image description here

Creating one layer over the basemap it is possible to show but I need to set this for multiple WMS Layers.

So my main problem is I'm unable to write code for showing WMS layer over the basemap. This is my code so far.

<script src="sideicon_file/js/main.js"></script>
<script src="jsuntitled/ol.js"></script>
<script>
    //this is my first layer as you can see from screenshot no.2  
var landuseLayer = new ol.layer.Image({
    coordinates: [-124.73142200000001, 24.955967,
                    -66.969849, 49.371735],
    source: new ol.source.ImageWMS({
      url: 'http://localhost:8080/geoserver/topp/wms',
      params: {'LAYERS': 'topp:states'},
     maxZoom: 19
    }),
    visible: false,
  });

  var  soilLayer = 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'},
          maxZoom: 19
        }),
        visible: false
      });

var map = new ol.Map({
  layers: [landuseLayer, soilLayer],
  renderer: 'canvas',
  target: document.getElementById('map'),
  controls: ol.control.defaults({
                attributionOptions: ({
                    collapsible: false
                })
            }).extend([
                new ol.control.ZoomSlider(),
                new ol.control.ZoomToExtent({
                    extent: [
                        813079.7791264898, 5929220.284081122,
                        848966.9639063801, 5936863.986909639

                    ]
                }),

                new ol.control.Rotate(),
                new ol.control.OverviewMap(),
                new ol.control.ScaleLine(),
                new ol.control.FullScreen(),
                new ol.control.MousePosition({
                    coordinateFormat: ol.coordinate.createStringXY(4),
                    projection: 'EPSG:4326'
                })
            ]),

  interactions: ol.interaction.defaults().extend([
                new ol.interaction.Select({
                    condition: ol.events.condition.mouseMove
                })
            ]),

            view: new ol.View({
                center: new ol.geom.Point([-10997148, 4569099])
                    .transform('EPSG:4326', 'EPSG:4326').getCoordinates(),
                zoom: 4
            }),

            target: 'map'
        });

$('input[type=checkbox]').on('change', function() {
  var layer = {

    landuse: landuseLayer,
    soil: soilLayer,

  }[$(this).attr('id')];
  layer.setVisible(!layer.getVisible());
});

Best Answer

I got the answer, we just need to set 

layers: [new ol.layer.Tile({
    source: new ol.source.OSM()
})landuseLayer, soilLayer],

in place of layers: [landuseLayer, soilLayer],

Image will display over the map :)

Related Question