#1 Fri 01 May 2020 16:08
- sylvainSIG
- Participant assidu
- Lieu: Moissac
- Date d'inscription: 29 Nov 2018
- Messages: 265
Création d'un curseur d'opacité en jquery / js
Bonjour,
Je suis en train de faire une petite appli carto frontend avec OL 6. J'ai déjà réussi à faire apparaître et masquer une couche via des cases à cocher.
Il existe bien le LayerSwitcher d'OL qui permet de faire ça, mais plus je l'utilise et plus je me rend compte que c'est du bricolage, que le rendu est vraiment pas top, et que les fonctionnalités sont assez limitées (vu qu'on a pas la main sur le code du module lui-même).
Voici le code que j'ai établi pour masquer/cacher une couche :
Code:
$('input[type=checkbox]').on('change', function() { var idCheckbox=$(this).attr('value'); // value de l'input qui doit être la même que le titre de la couche group.getLayers().forEach(function(element, index, array){ // group est ici un groupe de couches, le nom n'a aucune importance si ce n'est que ça doit faire référence à une variable var idCouche=element.get('title'); if(idCheckbox===idCouche){ element.setVisible(!element.getVisible()); } }); });
Seulement le problème est ici : ce code renvoie un booléen qui décide de l'affichage ou non de la couche.
Le code que j'essaye d'établir doit renvoyer une valeur entre 0 (totalement transparent) et 100 (totalement opaque).
Un curseur d'opacité d'une couche quoi !! :-)
Est ce que quelqu'un aurait une idée ?
Merci
Sylvain
Hors ligne
#2 Sat 02 May 2020 09:26
- Blaise Picinbono
- Participant actif
- Date d'inscription: 8 Jan 2015
- Messages: 70
- Site web
Re: Création d'un curseur d'opacité en jquery / js
Bonjour;
En cherchant avec "openlayers opacity slider", on trouve quelques pistes.
Ces deux premières font usage de jquery:
https://girona-openlayers-workshop.read … lider.html
https://jsfiddle.net/Svinjica/L7edtgx3/19/
Mais si on n'a pas besoin de jquery ailleurs, on peut peut-être s'en passer avec un slider js de ce type là:
https://openlayers.org/en/latest/exampl … level.html
Hors ligne
#3 Sat 02 May 2020 15:04
- sylvainSIG
- Participant assidu
- Lieu: Moissac
- Date d'inscription: 29 Nov 2018
- Messages: 265
Re: Création d'un curseur d'opacité en jquery / js
Bonjour,
Merci Blaise pour tous tes liens. Le premier m'intéresse pas vraiment vu qu'il fait référence à OL3. Sinon le lien jsfiddle fonctionne bien. Reste plus qu'à généraliser le script histoire que toutes les couches soient concernées.
Code:
$('input[type=range]').on('change', function(){ var idslider = $(this).attr('name'); map.getLayers().forEach(function(element, index, array){ var idCouche=element.get('title'); var idCoucheOpacity=element.get('opacity'); if(idslider===idCouche){ element.setOpacity(idCoucheOpacity); } }) })
Ce code ne marche pas mais je ne sais pas pourquoi...
Merci à toi en tout cas
Sylvain
Dernière modification par sylvainSIG (Sat 02 May 2020 17:44)
Hors ligne
#4 Sun 03 May 2020 10:10
Re: Création d'un curseur d'opacité en jquery / js
Bonjour Sylvain,
Pour les sujets OL il est préférable de poster sur ce forum [geolibre_web], et si possible préciser dans l'hirondelle (sujet) la version d'OL.
Bon dimanche!
Hors ligne
#6 Mon 11 May 2020 13:56
- sylvainSIG
- Participant assidu
- Lieu: Moissac
- Date d'inscription: 29 Nov 2018
- Messages: 265
Re: Création d'un curseur d'opacité en jquery / js
Bonjour,
Je travaille en local dc difficile d avoir accès à la plate forme à distance
Cdt
Hors ligne