How to move and rotate WMS layers independently using OpenLayers (without GeoServer)

Question

There are maps on OpenLayers 6 and proj4js that manages WMS layers in different projections. Sometimes (e.g. for plan maps) the overlay is not aligned with base layer and a need a function that can move and rotate the WMS layer, so the user can align the layer.

I found this answers:

• How to move WMS layers independently using OpenLayers 3 (with GeoServer)
• Moving WMS overlay independently to match base layer in OpenLayers

But I can't apply in my case because I don't manage the server and the layer is not a vector origin.

How does OpenLayers draw the map in the canvas?

I'd expect there's some point in the code in which I could add a offset and rotate to the layer image that has been retrieved from WMS.

The solution proposed in the second answer solves only half of the problem (displacement), but the rotation problem remains unresolved...

const source = new ImageWMS({
  url: 'https://ahocevar.com/geoserver/wms',
  params: {LAYERS: 'topp:states'},
  ratio: 1,
  serverType: 'geoserver',
  imageLoadFunction: function (image, src) {
    const offsetX = 100000;
    const offsetY = 100000;
    const url = new URL(src);
    const params = url.searchParams;
    const oldParams = params.toString();
    const bbox = params.get('BBOX').split(',').map(Number);
    bbox[0] -= offsetX;
    bbox[1] += offsetY;
    bbox[2] -= offsetX;
    bbox[3] += offsetY;
    params.set('BBOX', bbox.toString());
    const newParams = params.toString();
    image.getImage().src = src.replace(oldParams, newParams);
  },
});

Answer 1

For user controlled fine alignment you could translate the layer canvas context before rendering the layer. The important part of the code would look like

wmsLayer.on('prerender', function (event) {
  const resolution =
    event.frameState.pixelRatio * event.frameState.viewState.resolution;
  event.context.save();
  event.context.translate(offsetX / resolution, offsetY / resolution);
});

wmsLayer.on('postrender', function (event) {
  event.context.restore();
});

Example https://codesandbox.io/s/wms-image-forked-71k9nh?file=/main.js

If you need to set an anchor for scaling or rotation that could be done by clicking on the map with a modifier key such alt, control or shift, for example:

map.on('click', function(event){
  if (platformModifierKeyOnly(event)){
    anchor = event.coordinate;
    wmsLayer.changed();
  }
});