Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Rencontres QGIS 2025

L'appel à participation est ouvert jusqu'au 19 janvier 2025!

#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

Bruno
Membre du bureau
Lieu: Toulouse
Date d'inscription: 22 Jun 2005
Messages: 11959
Site web

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

 

#5 Sat 09 May 2020 19:48

Dumpin
Juste Inscrit !
Date d'inscription: 8 Jul 2018
Messages: 2
Site web

Re: Création d'un curseur d'opacité en jquery / js

Hello !

Est-ce pourrait-on avoir accès à l'appli ?

Cdt,

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

 

Pied de page des forums

Powered by FluxBB