Discussion :

[jrenard]

C'est encore moi,

Suite de mes investigations de mise à jour du SDK, j'ai relevé un comportement étrange quand il s'agit de styler après coup une couche GeoJSON.

Test à faire depuis une ancienne version du SDK à l'url https://www.agglo-larochelle.fr/carto/embed

En console, exécuter le code suivant qui va ajouter une couche de ponctuels, définir une fonction de style, et appliquer cette fonction de style à la couche OpenLayers sous-jacente => Ca marche parfaitement

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var layerOptions = {
    'conteneur' : {
        title: 'Conteneurs textiles',
        picto: '',
        format: 'geojson',
        url: 'https://www.agglo-larochelle.fr/documents/10839/10998519/Conteneur+textile+-+couche.json/ac244d0b-ffab-4e48-8fe3-c252a72c9e6a',
        projection: 'EPSG:3857'
    }
}
map.addLayers(layerOptions)
 
var gpStyleFunction = function(feature) {
    return new ol.style.Style({
        image: new ol.style.Icon({
            src: 'https://www.agglo-larochelle.fr/documents/10839/10998534/picto-oap-autres.png/d5adbc41-7487-4a22-937e-91336d7f71f7',
            size: [28,41],
            anchor:[0.5,1]
        })
    });
}
var olLayer = map.getLibMap().getLayers().item(map.getLibMap().getLayers().getLength()-1);
olLayer.setStyle(gpStyleFunction);

Même code exécuté en console depuis la version actuelle du SDK à l'url https://www.agglo-larochelle.fr/cart...d-nouvelle-api => le style n'est pas appliqué

Encore plus étrange : si je modifie le code ci-dessus pour définir du clustering sur la couche (même du "faux clustering" avec une distance de 0) en redéfinissant la source de données => cette fois-ci le style est bien appliqué

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var layerOptions = {
    'conteneur' : {
        title: 'Conteneurs textiles',
        picto: '',
        format: 'geojson',
        url: 'https://www.agglo-larochelle.fr/documents/10839/10998519/Conteneur+textile+-+couche.json/ac244d0b-ffab-4e48-8fe3-c252a72c9e6a',
        projection: 'EPSG:3857'
    }
}
map.addLayers(layerOptions)
 
var gpStyleFunction = function(feature) {
    return new ol.style.Style({
        image: new ol.style.Icon({
            src: 'https://www.agglo-larochelle.fr/documents/10839/10998534/picto-oap-autres.png/d5adbc41-7487-4a22-937e-91336d7f71f7',
            size: [28,41],
            anchor:[0.5,1]
        })
    });
}
var olLayer = map.getLibMap().getLayers().item(map.getLibMap().getLayers().getLength()-1);
var clusterSource = new ol.source.Cluster({
  distance: 0,
  source: olLayer.getSource()
});
olLayer.setSource(clusterSource);
olLayer.setStyle(gpStyleFunction);

Une idée de ce qui se passe ? C'est très étrange.

Je précise que pour ce cas précis (un seule picto identique pour tous les points) j'aurais pu passer par les styleOptions de la couche de la map Géoportail directement. Mais l'idée derrière c'est de profiter de la mécanique de la couche OpenLayers pour définir une styleFunction dépendant des propriétés des points, chose qui sauf erreur de ma part n'est pas permise par le couche Géoportail directement.

[elias couppe]

Re bonjour,

Je n'ai pas encore regardé en détail, mais je constate bien le problème, merci pour ta description détaillée. C'est effectivement une partie du code à laquelle on a touché dernièrement...j'ai l'impression qu'on a cassé la hiérarchie des priorités sur les styles appliqués aux couches, et qu'un style appliqué à une couche vectorielle directement via OpenLayers n'est plus pris en compte par le SDK et semble sortir du workflow...

On essaye de regarder dès que possible pour corriger ça.

Merci pour ta remontée,

Elias

[jrenard]

Hello !

J'up le sujet, juste pour savoir si vous avez des pistes de résolution de ce problème.

Merci

[lowzonenose]

Hello Jeremy,

Il faut que tu utilises ce code pour surcharger les styles :

]
olLayer.getSource().getFeatures().forEach((feature) => {
feature.setStyle(gpStyleFunction);
});

Explication :
Les styles sont ajoutés au niveau des features afin d'avoir la possibilité de serialiser les styles lors d'un export.
Du coup, il n'est donc plus possible de surcharger les styles via l'appel setStyle() du layer, car les styles au niveau du feature sont prioritaire au layer !

Si pas assez claire, appelle nous

@+JP

[jrenard]

Salut JP !

Merci pour le tip. J'essaye ça avant la fin de semaine et je te dis.

Sinon, j'espère que t'as pensé à moi au mois de mai ces deux dernières années. Y a probablement ma tronche quelque part sur cette photo

[jrenard]

Salut,

J'ai donc essayé le code suivant sur l'url https://www.agglo-larochelle.fr/cart...d-nouvelle-api :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
var layerOptions = {
    'conteneur' : {
        title: 'Conteneurs textiles',
        picto: '',
        format: 'geojson',
        url: 'https://www.agglo-larochelle.fr/documents/10839/10998519/Conteneur+textile+-+couche.json/ac244d0b-ffab-4e48-8fe3-c252a72c9e6a',
        projection: 'EPSG:3857'
    }
}
map.addLayers(layerOptions)
 
var gpStyleFunction = function(feature) {
    return new ol.style.Style({
        image: new ol.style.Icon({
            src: 'https://www.agglo-larochelle.fr/documents/10839/10998534/picto-oap-autres.png/d5adbc41-7487-4a22-937e-91336d7f71f7',
            size: [28,41],
            anchor:[0.5,1]
        })
    });
}
var olLayer = map.getLibMap().getLayers().item(map.getLibMap().getLayers().getLength()-1);
olLayer.getSource().getFeatures().forEach((feature) => {
    feature.setStyle(gpStyleFunction);
});

Verdict : ça n'a rien changé, le style n'est toujours pas appliqué...

Je devrais avoir le style de gauche, et j'ai toujours un style par défaut comme à droite. Mais peut-être y a-t-il quelque chose que je n'ai pas compris ?

[lowzonenose]

tu peux mettre un setTimeOut sur l'application de la fonction de style sur les features.

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
setTimeOut(function () {
  olLayer.getSource().getFeatures().forEach((feature) => {
      feature.setStyle(gpStyleFunction);
  });
}, 200);

[jrenard]

Yes, beaucoup mieux !
En live console ça marche. J'intègre dans mon code et je checke

[lowzonenose]

Il y'a du download des icônes dans ton style, du coup, l'opération devient asynchrone.
Faut donc laisser un peu de temps au chargement.

[jrenard]

J'ai envoyé, dans le code, ça marche vraiment bien ! Merci !
Ca résout 95% des cas de figure.

Me reste des soucis en cas de style sur des linéaires :
- https://www.agglo-larochelle.fr/cart...-lignes-de-b-1
- https://www.agglo-larochelle.fr/cart...-lignes-de-b-1

Ou en cas de styles multiples suivant la résolution :
- https://www.agglo-larochelle.fr/cart...-oap-modifiees
- https://www.agglo-larochelle.fr/cart...-oap-modifiees

Je vais me pencher sur ces cas de figure. Je passe pas encore en résolu, je le ferai quand tout sera réglé