Vector text over layers

[scadergit]

I didn't find an answer on google, so asking here...it appears OpenLayers is rendering the text of the vector layer >>>> topographic (mapbox) over the national (radar...green-ish squares) layer (group), that the console output verifies is later (or above) the vector layer (group). Is that expected behavior of OpenLayers and/or ol-mapbox-style, or something I should investigate?

[ahocevar]

It has to do with label decluttering, and it is expected behavior. Labels and symbols of all layers with the same className are rendered on top of everything else. In ol-mapbox-style, you cannot override this. In OpenLayers, you can give the vector layer a different className, or configure it with declutter: false.

For a long time, I have been wanting to give Image and Text styles a declutterGroup option in OpenLayers, for better control of this without the expensive className change. But I haven't found time for it yet.

[scadergit]

@ahocevar I've been digging into code to better understand this limitation (and possibly help resolve), but without general documentation on the code structure, I'm having to piece together a few parts...it looks like the Executor class manages the declutter effort, but relies on each layer type renderer to determine what symbols are decluttered? Could you point me to the script that actually creates the new decluttered layer(s)? It helps to work my way back from that spot, but not seeing where that happens.

[scadergit]

Hello, @ahocevar --I was pulled away from this project since I last updated, but back at it again. Getting this resolved is one of the top-most concerns for National Weather Service given the titles overlay the radar raster layers that are considered critical.

Happy to do most of the work, but any pointers on where you would implement declutterGroup for Image and Text?

[ahocevar]

@scadergit Thanks for willing to help here! Take a look at the renderFrame() method in ol/renderer/Composite.js. At the end of that method, renderDeclutter() is called for each layer (in reverse order). If it is enough to configure declutter groups on a per-layer basis, the logic there could be changed to call renderDeclutter() while still in the loop that walks through the layerStatesArray to render all layers, in case the declutterGroup changes.

API wise, this could then look something like

const layers = [
  new VectorLayer({
    declutterGroup: 'group1',
    // ...
  }),
  new VectorTileLayer({
    declutterGroup: 'group1',
    // ...
  }),
  new TileLeyer({
    // ...
  })
];

With the TileLayer having no declutterGroup, which is different from group1, all decluttering of the VectorLayer and VectorTileLayer would happen before the TileLayer gets rendered.

So the declutterGroup option could also be set on TileLayer or ImageLayer instance, if it is desired to render decluttered text from previous Vector or VectorTile layers on top of them.

In ol-mapbox-style, I'm not sure what the best way to configure that would be. If you're able to put the raster layer in a separate Mapbox style, I think it would make sense to render each Mapbox style with a declutterGroup that has the root style id as name.

[scadergit]

Appreciate the generous direction. I'll get my head back in the game next week and see what I can flush out.

[scadergit]

A draft pull to review: #911

@ahocevar after falling into renderer and execute rabbit holes to better understand the flow, I stepped back and made the change as you suggested. Please refer to the openlayers pull noted above. Thoughts on the implmentation (aside from the temporary console logs)? Nothing fancy, let me know if it needs refinement.

[zhc612]

我加载mapboxgl的样式时，等高线上面的文本标注显示错乱，这个有什么解决方案吗？