vuejs3 - How to place canvas under Openlayers layers with web workers - Stack Overflow

admin管理员组

文章数量:1289911

I am working on a project using OpenLayers with Vue3, where I have a map containing layers with features. Additionally, I have a canvas that I frequently draw on.

I need the canvas to be positioned between the map and my feature layers, meaning the OpenLayers features should be drawn above the canvas image.

To have a better control of the layers, I attempted to add the canvas to OpenLayers using an ImageLayer and then adjusted the zIndex of the layers. However, even with a zIndex of 0 for the canvas and a zIndex of 5 or even 1000 for the features, the canvas always remains on top.

Here is my trial code:

 const layer = createCanvasLayer(site)
 mapStore.canvasLayer.push(layer)
 mapStore.map?.addLayer(layer)
 layer.set('name', 'canvas-layers')

// Function to create layer of canvas
const createCanvasLayer = (site: ISite) => {
  return new ImageLayer({
    source: new ImageCanvasSource({
      canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
        const canvas = document.createElement('canvas')
        canvas.width = site.image.size
        canvas.height = site.image.size

        // Handing over the canvas to a Web Worker for drawing
        workersStore.initWorker(site, canvas)

        return canvas
      },
      projection: 'EPSG:3857',
      ratio: 1,
    }),
    zIndex: 0
  })
}

Before using ImageLayer I also tried to use the simple z-index css value, but that didn't change anything as well.

Additional Information:

1. I create the OpenLayers canvas only when the user clicks on a button, whereas features layer is created automatically. This means that the canvas layer is added after the feature layer. However I tried to compensate this by adding the zIndex which wasn't fruitful
2. After the canvas is created, I hand over control to a Web Worker to handle the drawing. However, I don't think this affects the zIndex, as my feature layers still remain at 0 or 1000, but I mention this in case it might have an impact.

How can I ensure that my OpenLayers features are rendered above the canvas while keeping the canvas below them? Why is my canvas on top of my layers even though it has a zIndex inferior to my layer ? I am open to try any other solutions (other than ImageLayer) that might exist

Thanks in advance for any help!

UPDATE:

After more tests I am almost sure that it is coming from the web worker. I think it doesn't take into account my zIndex when I am giving it the control of my canvas. What makes me think it is coming from web worker: I tried drawing a simple canvas in ImageLayer, and I have my canvas drawn under my feature layer (I just changed my function initWorker to something like :

const gl = canvas.getContext('webgl2')

if(gl){
  gl.clearColor(0.05, 0.0, 0.0, 0.5)
  gl.clear(gl.COLOR_BUFFER_BIT)
}

And if I do the exact same thing in my webWorker.ts at init, it is on top of all my layers. Even with map.render() in main thread it still stays on top. I wish for my canvas to stay in my web worker.

So I am now searching for a way to keep the layer order while drawing in my web worker

New update It might be coming from my Pinia store (Vue) as as store my workers in Pinia, but when I render out of Pinia it is working fine

本文标签： vuejs3How to place canvas under Openlayers layers with web workersStack Overflow