0

I have created a webmap with a layer swipe using OpenLayers 6.3.1 like this. My goal is to display different WMS layers on both sides with different base maps. For now, I have made it so that I can display layers on one side or the same layers on both sides at the same time with different base maps. What I want to do is to have different WMS layers on each side with different base maps.

If this is possible using layer swipe, then how?

I know that shared view (link here) could be a solution but I must use layer swipe.

The code for the layer swipe:

    const aerial = new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: 'https://wxs.ign.fr/ortho/geoportail/r/wms',
      params: {'LAYERS': 'HR.ORTHOIMAGERY.ORTHOPHOTOS', 'TILED': true, 'SRS': 'EPSG:3857'},
      serverType: 'geoserver'
  })
  
});

class Swipe extends CustomLayer {
   // Initialize the Custom Layer
  constructor(id, layer, legend, handle = false) {
    // Initialize CustomLayer superClass
    super(id, layer, legend, handle);
    // Define events on the Tile Layer
    aerial.on('prerender', function (event) {

      var ctx = event.context;
      var width = ctx.canvas.width * (swipe.value / 100);
      ctx.save();
      ctx.beginPath();
      ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
      ctx.clip();
    });
    // Define events on the Tile Layer
    aerial.on('postrender', function (event) {
      var ctx = event.context;
      ctx.restore();
    });
  }
}
// Create The Custom Layer
new Swipe("swipe",aerial);

The const aerial is defined as being the basemap on the right side. I want to add a WMS on the right side. The layers on the left side are already functional.

6
  • What do you mean by "data layers"? Vector data? WMS data? GeoTIFF data?
    – Mike
    Sep 30, 2022 at 12:28
  • @TomazicM Thank you for your feedback. I edited my question.
    – GisUser
    Sep 30, 2022 at 12:36
  • @Mike WMS data. I edited my question.
    – GisUser
    Sep 30, 2022 at 12:37
  • If both are tile layers (you use TileWMS) call the prerender on the first layer and postrender on the last layer on that side - or first and last component layers of a group as in codesandbox.io/s/layer-swipe-forked-ergq99?file=/main.js Mixing Image and Tile layers might not work with view rotation as they are rotated differently.
    – Mike
    Sep 30, 2022 at 13:08
  • 1
    Without seeing your code it would all be just guessing what might be wrong.
    – TomazicM
    Sep 30, 2022 at 17:14

1 Answer 1

0

The best solution for my problem was to use layer groups. I created a group layer in GeoServer where I combine the base map and my other data layers. I then added the layer as a WMS to my map.

If both are tile layers (you use TileWMS) call the prerender on the first layer and postrender on the last layer on that side - or first and last component layers of a group as in codesandbox.io/s/layer-swipe-forked-ergq99?file=/main.js Mixing Image and Tile layers might not work with view rotation as they are rotated differently.

The solution provided by @Mike is an interesting solution but it is not suitable for my problem as it doesn't work regarding the complexity of my code files. I advise others to read his answer as well.

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.