OpenLayers met React ververst de data niet

Toepassingen
#1

Ik help iemand om OpenLayers toe te voegen aan zijn React-applicatie.
We hebben inmiddels PostGIS en GeoServer draaien en we kunnen geo-data tonen.

We hebben wat uitdagingen wat lijkt op problemen met het verversen van de kaart.
We zijn met een soort layer-control bezig waarmee we lagen aan en uit willen zetten.
Daar gebruiken we layer1.setVisible(true); voor. Maar de laag wordt niet getoond.
Als we de waarde van layer1.getVisible() loggen, zien we dat voor de aanroep van layer1.setVisible(true); de waarde false is en erna is die true. Dus het zou moeten werken.

Hetzelfde als we aan een VectorSource features toevoegen. Die nieuwe features lijken wel in het object te zitten, maar worden niet getoond op de kaart.

We hebben al een hele serie refresh-commands gebruikt: map.refresh(), map.redraw(), map.render(), vectorSource.changed(), vectorSource.refresh(), maar niets lijkt de map te updaten.

Is er hier iemand bekend met de combinatie OpenLayers (v5.3) en React en/of herkent deze situatie?

Alvast bedankt.

#2

Kun je de manier waarop je setVisible() aanroept delen? Doe je dat in een event handler?

Ik heb een beetje met React Native (zonder kaart) gespeeld en mijn onderbuikgevoel zegt dat het iets te maken heeft met hoe/waar je de setVisible call doet.

Het kan zijn dat je het in een van de lifecycle hooks moet aanroepen bijv ipv een click even handler.

Deze heb je vast al gevonden: Using OpenLayers with React - Taylor Callsen.

#3

Bedankt Simeon voor de reactie en voor de link, die kende ik nog niet.
De vraag staat ook op StackOverflow: javascript - Changing the visibility of layers dynamically in Openlayers - Stack Overflow

De uitdaging is dat ik weinig weet van React en hij weinig van OL :wink:

1 like
#4

Heb je al geprobeerd de visibility van je layer aan te passen door de layer op te vragen uit je map object met map.getLayers()? Dit geeft een array terug met alle layers die met map geassocieerd zijn. Er vanuit gaande dat layer1 de enige layer is, kun je de visibility setten met map.getLayers()[0].setVisibile(true/false).

Het zou kunnen dat layer1 niet refereert naar de layer die daadwerkelijk in de kaart zit.

Andere optie is layer1 te verwijderen uit je map en weer toe te voegen wanneer je via de layer control de laag activeert.

1 like
#5

Ik heb een comment geplaatst op SO.

Wat me opviel is dat je/jullie elke keer dat map variabele veranderd (in de eerste useEffect() call) een nieuw kaart aanmaken. Dat lijkt me niet nodig aangezien je de kaart maar eens in je app/component hoeft aan te maken. Wat wordt er in map opgeslagen en hoe vaak verandert het?

Ik kan me voorstellen dat dit voor vreemd gedrag kan zorgen (het is sowieso een verspilling van resources… ;)).

#6

Bedankt Rony en Simeon, ik ga met jullie opmerkingen aan de slag en zal hier weer terugkoppelen.

2 likes