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é

[jrenard]

Hello,

J'avais pas trop eu le temps de me repencher sur le sujet ces derniers mois, juste pour dire que tous les cas d'usage fonctionnent.

Merci encore pour le support, je passe en résolu.

A une prochaine

[jrenard]

J'ai parlé trop vite : il y a un problème qui persiste.

Exemple sur https://www.agglo-larochelle.fr/cart...neurs-textiles

Les données sont chargées via un GeoJSON, avec application de style. On voit bien que le picto est correctement appliqué, avec un léger flash dû au setTimeout (le temps de passer du picto par défaut au picto chargé via setStyle). Ce flash est un peu désagréable à l'oeil, mais c'est pas l'essentiel (si vous avez une idée pour le supprimer je prends quant même).

Mais dès qu'on zoome/dézoome, les pictos par défaut refont leur apparition. Je me vois mal réappliquer le style aux features à chaque zoom/dézoom sur l'ensemble des couches concernées. Comment pourrait-on s'assurer de la persistence du style sur la couche ?

[lowzonenose]

c'est vrai, y'a un truc qui cloche...
Tu définies ta fonction de style pour chaque feature, mais ensuite, cette fonction est undefined après chaque rendu de la couche !?

Ne vaudrait il pas appliquer cette fonction au niveau de la couche au lieu de l'appliquer manuellement pour chaque feature ?

Code :

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

1
2
3
new ol.layer.Vector({
  style : myFunctionStyle
});

[jrenard]

J'ajoute mes couches en utilisant le map.addLayers(layerOptions) du SDK, pas directement en définissant la couche OpenLayers, donc je peux pas faire comme ça non (je suis un peu rouillé) ?

EDIT : tu m'avais dit ça y a quelques temps : "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 !". C'est pour ça que tu m'avais conseillé de styler les features plutôt que le layer de façon globale

[jrenard]

J'ai compris !
Comme tu l'as dit, les styles du feature prennent le pas sur celles du layer. Donc il suffit d'appliquer le style au layer (comme fait au tout départ), puis de désactiver les styles des features.
Pour ça la doc OpenLayers dit d'appliquer un setStyle sans argument sur les features

Code javascript :

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

1
2
3
olLayer.getSource().getFeatures().forEach((feature) => {
      feature.setStyle();
  });

Et ça marche !

Si je reprends le code de mon tout premier message, il suffit donc d'ajouter ces 3 lignes, ce qui donne :

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.setStyle(gpStyleFunction);
olLayer.getSource().getFeatures().forEach((feature) => {
      feature.setStyle();
  });

Testé, déployé, tout est nickel. Merci pour les discussions qui m'ont fait comprendre le truc