OpenLayers + Nuxt 3 : Issue with visual update after applying filters without using refresh()

I’m working on a project using Nuxt 3 and OpenLayers version 10.
I’m facing difficulties with updating the visual rendering of the map after applying filters on my vector layers.

Context :

I have several vector layers ( points and multilinestring ) on my map, and filters that allow me to hide or display certain features based on a different criteria.
Currently, I’m using layer.getSource().refresh() to reload the data after applying the filters, but this causes an issue: the map view (zoom and center), is reset, and the user often has to zoom out manually to see the visual update.

  • I’m already using layer.changed() before calling refresh(), but I doesn’t seem to be enough to force a visual update without reloading the entire data source.

Current code :

const reloadAllLayers = () => {
  const map = mapInstance.value
  if (!map) { return }

  map.updateSize()
  map.render()

  map.getLayers().forEach((layer) => {
    if (layer instanceof VectorLayer) {
      layer.changed()
      layer.getSource().refresh()
    }
  })

  map.getView().changed()
}

What I want :

I’m looking for a solution that allows me to :

  • Apply filters on my vector layers without having use layer.getSource().refresh()
    (witch causes the map view state to be lost)

  • Ensure a proper visual update after applying the filters without requiring the user to manually adjust the zoom or view.

Any suggestions or examples of successfully updating the map visually without losing view state (zoom, center) would be greatly appreciated !

Thanks for your help !