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
         }));


    }
  • 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 '17 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. – Brynne Aug 18 '17 at 18:51
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, privacy policy and cookie policy

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