Annonce
#1 Fri 10 March 2017 16:35
- cherbe
- Participant occasionnel
- Date d'inscription: 1 Nov 2008
- Messages: 41
Leaflet : réglage individuel de l'opacité des images PNG
Bonjour
Je souhaite publier quelques cartes de la grande guerre. Il s'agit de canevas de tir de l'artillerie selon la terminologie militaire.
Je les aies géoréférencées et elles se calent sur un fond de carte Openstreetmap. Elles sont affichées par l'utilisateur à l'aide d'un control.layers.
Je voudrais que l'utilisateur puisse modifier l'opacité à sa guise pour faciliter le repérage :
- opacité faible pour voir où l on est sur la carte OSM
- opacité maximum pour lire le détail de la carte militaire.
L'idéal serait de pouvoir modifier la propriété "opacity" de chaque calque
Voici un extrait du script :
Code:
var verdun1 = 'verdun_sud_1.png',
imageBounds = [[49.09469116091674,5.583104662373692], [49.04824718809565,5.390170434175006]];
var verdun1= L.imageOverlay(verdun1, imageBounds,{opacity: 1});
var cartes =
{
"fond":fond,
"Verdun Sud 1 (55)":verdun1
};
L.control.layers("",cartes,{position:"topleft"} ).addTo(map);Hors ligne
#2 Wed 15 March 2017 17:52
- nworr
- Participant actif
- Date d'inscription: 10 Apr 2014
- Messages: 74
Re: Leaflet : réglage individuel de l'opacité des images PNG
Bonjour,
Je connais bien plus openlayers que leaflet mais à ma connaissance leaflet ne fourni pas de control permettant d'offrir à l'utilisateur un curseur pour modifier l'opacité à la volée.
Cependant la méthode setOpacity() de ImageOverLay (http://leafletjs.com/reference-1.0.3.html#imageoverlay ) permet de modifier l'opacité.
Ne reste qu'à faire du javascript pour modifier celle-ci :
voir du cote de jquery ui slider https://jqueryui.com/slider/
ou http://danielstern.ca/range.css/#/
et récupérer la valeur dans le dom pour l'affecter au Layer.
Une méthode plus simple peut être éventuellement de faire juste des bouton de "swith" entre valeur forte et faible d'opacité
Hors ligne
#3 Thu 16 March 2017 10:10
- cherbe
- Participant occasionnel
- Date d'inscription: 1 Nov 2008
- Messages: 41
Re: Leaflet : réglage individuel de l'opacité des images PNG
Une méthode plus simple peut être éventuellement de faire juste des bouton de "swith" entre valeur forte et faible d'opacité
Bonjour
C'est la solultion vers laquelle je me suis rabattu. J'ai créé des balises html <SELECT> avec onChange qui appelle une fonction avec la méthode setOpacity().
Ca fonctionne mais ce n'est pas très élégant puisqu'il y a autant de select que d'image.
J'ai bien trouvé un plugin Leaflet.OpacityCcontrol mais je n'ai pas réussi à le faire fonctionner.
Merci de ton aide !
Hors ligne
#4 Thu 16 March 2017 11:11
- Delu
- Participant actif
- Lieu: Briançon
- Date d'inscription: 29 Apr 2008
- Messages: 76
Re: Leaflet : réglage individuel de l'opacité des images PNG
Bonjour,
Vous pouvez utiliser une petite extension de Leaflet : https://github.com/lizardtechblog/Leafl … tyControls
Elle est en place ici : http://geologie.ecrins-parcnational.fr/
Sous le layer switcher se trouve un petit slider vertical permettant de modifier l'opacité de la carte géologique à volonté.
Vous trouverez le code dans le fichier homeController.js
Bonne journée
Hors ligne
#5 Fri 17 March 2017 01:49
- cherbe
- Participant occasionnel
- Date d'inscription: 1 Nov 2008
- Messages: 41
Re: Leaflet : réglage individuel de l'opacité des images PNG
Vous pouvez utiliser une petite extension de Leaflet : https://github.com/lizardtechblog/Leafl … tyControls
J'avais vu ce plugin mais je croyais qu'il n'agissait que sur une image. Je viens de lire la doc plus en détail et j'ai trouvé ceci :
You only need to call the setOpacityLayer() method for one control. The method sets the opacity layer for the other controls automatically.
Il ne me reste plus qu'à tester !
Merci beaucoup.
Hors ligne
