0

I'm trying to display information on OpenLayers from different sources, I guess the problem is that some of these layers has information for the same areas as another layer already has. And OpenLayers doesn't allow overlapping of layers?

I found something about setting "allOverlays=true" should do the trick, but nothing changes. When display the layers one by one everything works fine. I just can't combine them.

Here's my code:

var layers = [

    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Image({
      source: new ol.source.ImageWMS({
        url: 'http://localhost:80/WMSServer1',
        params: {'LAYERS': 'buildings,restrictedarea'},
        ratio: 1
      })
    }),

            new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Image({
      source: new ol.source.ImageWMS({
        url: 'http://localhost:80/WMSServer2',
        params: {'LAYERS': 'areas,parks,buildings'},
        ratio: 1
      })
    }),

    new ol.layer.Image({
      source: new ol.source.ImageWMS({
        url: 'http://localhost:80/WMSServer3',
        params: {'LAYERS': 'areas'},
        ratio: 1
      })
    })

  ];
  var userPos = "";
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(function(position) {
          do_something(position.coords.latitude, position.coords.longitude);
        });
    } else {
      /* geolocation IS NOT available */
    }

  var map = new ol.Map({
    layers: layers,
    target: 'map',
    allOverlays:true, 
    view: new ol.View({
      center: [-10997148, 4569099],
      zoom: 4
    })
  });

  var lonLat = new ol.LonLat( -0.1279688 ,51.5077286 )
      .transform(
        new ol.Projection("EPSG:4326"), // transform from WGS 1984
        map.getProjectionObject() // to Spherical Mercator Projection
      );

var zoom=16;
var markers = new ol.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new ol.Marker(lonLat));
map.setCenter (lonLat, zoom);



    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(function(position) {
          do_something(position.coords.latitude, position.coords.longitude);
        });
    } else {
      /* geolocation IS NOT available */
    }
    function do_something(latUser,longUser){
        var newCoord = ol.proj.transform([longUser, latUser], 'EPSG:4326', 'EPSG:3857');
        console.log(newCoord);
        map.setView(new ol.View({
                center: newCoord,
                zoom: 10
         }));


    }
2
  • You can overlay as many WMS layers as you like but if they have the same extent, you'll only see the top layer unless you have transparency set.
    – nmtoken
    Aug 13, 2017 at 16:40
  • Maybe related: You added an OSM layer twice in your layers array. This will probably block the WMSServer1 layer you've added.
    – Emily
    Aug 18, 2017 at 18:51

1 Answer 1

1

As @nmtoken mentioned, if you want to see multiple imageWMS at a time you should set transparencies of layers. I wrote a sample for it.

I have two image wms: imageWms1 and imageWms2

Sample code is here.

var osm=new ol.layer.Tile({
    source: new ol.source.OSM()
  });

var imageWms2=new ol.layer.Image({
    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new ol.source.ImageWMS({
      url: 'https://ahocevar.com/geoserver/wms',
      params: {'LAYERS': 'topp:states'},
      ratio: 1,
      serverType: 'geoserver'
    }),
    opacity: 0.5
  });

var imageWms1=new ol.layer.Image({
    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new ol.source.ImageWMS({
      url: 'https://ahocevar.com/geoserver/wms',
      params: {'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'},
      ratio: 1,
      serverType: 'geoserver'
    })
  });

var map = new ol.Map({
  layers: [osm, imageWms1, imageWms2],
  target: 'map',
  view: new ol.View({
    center: [-10997148, 4569099],
    zoom: 4
  })
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.