Discussion :

[Leehan]

Bonjour,

J'utilise basiquement le layerswitcher de l'extension Géoportail afin de lister en légende les couches qui apparaissent sur ma carte.
Une de ces couches bénéficie d'une symbologie en fonction d'une propriété statut:

Code :

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
const macouche = new VectorLayer({
  source: maSource,
  style:  function stylePoint(feature) {
    const prop = feature.getProperties()
    if (feature.getProperties().statut === 'Rapport Rendu') {
      return new Style({
      image: new Circle({
        radius: 7,
        stroke: new Stroke({
          color: [255, 0, 0, 0.8],
          width: 2,
     }),
    fill: new Fill({
          color: [255, 150, 0, 0.8],
          opacity: 0.7,
          })
        })
      })
    } else {
      if (...

Ensuite, j'ajoute ma couche dans le layerswitcher :

Code :

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

1
2
3
4
5
listesCouches.addLayer(
 macouche, 
{
title: 'blabla'
})

Je souhaiterai ajouter la symbologie en sous légende de macouche dans le layerswitcher : un symbole pour chaque statut.
J'ai essayé d'utiliser les options legends et metadata de la mèthode addLayer() mais sans succès, ne sachant pas si je les manipule mal ou si ce n'est pas la bonne façon de faire.
Pouvez-vous me donner des pistes pour y arriver?
Merci

[xavlight]

Bonjour Leehan,

Apparemment, il y aurait qq chose de prévu, mais jamais réussi à l'utiliser.

• quicklookUrl (string) : link to a quick look image for this layer
• legends : array of layer legends. Each array element is an object, with following properties :
  - url (String, mandatory) : link to a legend
  - minScaleDenominator (Number, optional) : min scale denominator for legend validity.

Je viens de refaire un test rapide avec quicklookUrl , mais sans succès.
Regardes un peu de ton côté.
http://ignf.github.io/geoportal-exte...rSwitcher.html

Moi, j'ai de ce fait, j'ai pas utilisé le LayerSwitcher, et refait cette partie.

Avec les différentes couches que je souhaitais (cartes, statistiques, recherche POI...)



Pas sûr que ça t'aide beaucoup, j'espère que d'autres utilisateurs l'auront déjà utilisé.

Xav

[elias couppe]

Bonjour,

A - tout d'abord, petite démo du layerSwitcher avec les extensions Gp pour OpenLayers :

1 - j'ajoute une couche à ma carte

Par ex.

Code javascript :

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

1
2
3
4
5
6
7
8
9
 
var olStamen = new ol.layer.Tile({
                        source : new ol.source.Stamen({
                            layer : "watercolor"
                        }),
                        opacity : 0.5,
                        extent : [-635240, 4688265, 1204491, 6682415]
                    });
                    map.addLayer(olStamen);

2 - je configure l'affichage de la couche ajoutée (olStamen) dans le layerSwitcher

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
28
29
layerSwitcher = new ol.control.LayerSwitcher(
                        {
                            layers : [{
                                    layer : olStamen,
                                    config : {
                                        title : "Images Stamen",
                                        description : "Images Stamen",
                                        quicklookUrl : "lien-vers-une-image",
                                        legends : [
                                            {
                                                url : "lien-vers-un-fichier-de-légendes"
                                            }
                                        ]
                                        ,
                                        metadata : [
                                            {
                                                url : "lien-vers-un-fichier-de-metadonnees"
                                            }
                                        ]
                                    }
                                }
                            ],
                            options : {
                                collapsed: false
                            }
                        }
                    );
 
map.addControl(layerSwitcher);

3 - Voici le résultat



En cliquant sur le "i" associé à la couche dans le layerSwitcher, un nouvel encart s'ouvre :
- la petite loupe en haut à gauche de cet encart est un lien cliquable vers le quicklookUrl configuré
- les métadonnées apparaissent sous forme de liens vers les fichiers/pages de métadonnées sous le titre métadonnées de l'encart (on peut en mettre plusieurs)
- les légendes apparaissent sous forme de liens vers les fichiers/pages de légendes sous le titre légendes de l'encart (on peut en mettre plusieurs et régler le min/maxScaleDenominator dans la config)


B - Pour essayer d'apporter quelques pistes à la question

Nativement, le layerSwitcher des extensions ne permettra pas beaucoup plus que cela pour le customiser.

On pourra en vrac :
- soit garder le layerSwitcher tel quel et lister plusieurs légendes statiques pour la couche. Eventuellement essayer de bidouiller un peu pour conditionner l'affichage ou non des entrées de la liste Légendes au style courant de la couche
- soit surcharger le layerSwitcher via du css, en récupérant les éléments HTML qui le compose et en les personnalisant via les évènements de la carte (events JavaScript commun, listeners openlayers...)
- soit repartir d'un layerSwitcher recodé de A à Z (en s'inspirant de LS des extensions, ou d'autres exemples comme celui fourni par xavlight ci-dessus)

[xavlight]

Merci Elias pour ces infos qui sont très claires, comme d'habitude.

Leehan, tu peux aller jeter un œil ici avec cette extension OL qui peut-être une alternative pour ce que tu recherches.
Il y en a plusieurs mais avec tes demandes, celle-ci pourrait te convenir.

Démo - Controls : LayerSwitcher image
https://viglino.github.io/ol-ext/exa...her.image.html

Source
https://github.com/Viglino/ol-ext/bl...her.image.html

A toi de jouer

Xavlight

[Leehan]

Merci pour les réponses .

Refaire tout comme Xav me parait, de prime abord, hors de mes compétences.
Mais je me pencherai dessus si je n'arrive pas à quelque chose avec la seconde proposition. Je vois deux pistes :

• faire pointer le lien de l'option legends vers un html qui contient ma légende (bof...si ça marche)
  
• j'ai essayé de surcharger le layerSwitcher en voulant ajouter des éléments sous le contrôle de transparence de maCouche mais pour le moment je n'arrive pas à récupérer le div qui va bien pour y ajouter mes éléments de légende. Je vais commencer par suivre cette piste vu que d'après la réponse d'Elias, c'est faisable.
  

Merci