#1 Wed 09 August 2017 11:34
- tati
- Participant occasionnel
- Date d'inscription: 6 Jun 2017
- Messages: 27
GetFeaturesInfo leaflet
Bonjour,
Mes couches sont sur geoserver, j'arrive à les afficher via un appel flux wms.
Je veux afficher les données attributaires de chaque point dans une fênetre pop-up en cliquant sur ce dernier.
Après une recherche sur ce sujet, j'ai utilisé le code ci-dessous:
Quand j'ouvre la page et je clique sur un point la fenetre pop up s'ouvre mais elle est vide.
Quelqu'un pour m'aider svp ??
Code:
function initialize() { var map = L.map('mapid').setView([48.8182,2.3195], 14); var osmLayer = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', maxZoom: 19 }); map.addLayer(osmLayer); var points = L.tileLayer.wms("http://localhost:8080/geoserver/cite/wms?", { layers: 'cite:sirene', format: 'image/png', transparent: true }); points.addTo(map); var routes = L.tileLayer.wms("http://localhost:8080/geoserver/cite/wms?", { layers: 'cite:poly', format: 'image/png', transparent: true }); routes.addTo(map); map.addEventListener('click', onMapClick); popup = new L.Popup({maxWidth: 400}); function onMapClick(e) { var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')'; var BBOX = map.getBounds()._southWest.lng+","+map.getBounds()._southWest.lat+","+map.getBounds()._northEast.lng+"," +map.getBounds()._northEast.lat; var WIDTH= map.getSize().x; var HEIGHT = map.getSize().y; var X = map.layerPointToContainerPoint(e.layerPoint).x; var Y = map.layerPointToContainerPoint(e.layerPoint).y; var URL = 'http://localhost:8080/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&LAYERS=cite:sirene,cite:poly&QUERY_LAYERS=cite:sirene,cite:poly&STYLES=&BBOX='+BBOX+'&FEATURE_COUNT=5&HEIGHT='+HEIGHT+'&WIDTH='+WIDTH+'&FORMAT=image%2Fpng&INFO_FORMAT=text%2fhtml&SRS=EPSG%3A2154&X='+X+'&Y='+Y; popup.setLatLng(e.latlng); popup.setContent("<iframe src='"+URL+"' width='300' height='200' frameborder='0'></iframe>"); map.openPopup(popup); } }
Hors ligne
#2 Sun 13 August 2017 14:32
- cherbe
- Participant occasionnel
- Date d'inscription: 1 Nov 2008
- Messages: 41
Re: GetFeaturesInfo leaflet
Bonjour
As-tu essayé avec
Code:
popup.setContent("bla bla bla");
pour savoir si c'est l'URL qui ne fonctionne pas ou autre chose ?
Et que dit la console d'erreurs du navigateur ?
Dernière modification par cherbe (Sun 13 August 2017 14:38)
Hors ligne
#3 Wed 16 August 2017 11:34
- tati
- Participant occasionnel
- Date d'inscription: 6 Jun 2017
- Messages: 27
Re: GetFeaturesInfo leaflet
Bonjour Cherbe,
Merci pour votre réponse.
En faite j'ai remarqué que ça marche mais il faut cliquer sur un point de mes couches pour pouvoir afficher les attributs correspondants si non la fenêtre pop-up s'ouvre mais elle est vide.
Comment faire pour que la fenetre pop-up s'ouvre seulement quand on clique sur un point de mes couches et ne s'ouvre pas quand je clique sur le fond de carte ??
Dernière modification par tati (Wed 16 August 2017 11:37)
Hors ligne
#4 Wed 16 August 2017 14:59
- cherbe
- Participant occasionnel
- Date d'inscription: 1 Nov 2008
- Messages: 41
Re: GetFeaturesInfo leaflet
Comment faire pour que la fenetre pop-up s'ouvre seulement quand on clique sur un point de mes couches et ne s'ouvre pas quand je clique sur le fond de carte ??
Je ne suis pas spécialiste de Leaflet, loin s'en faut, mais je suppose qu'avec ta syntaxe :
Code:
map.addEventListener('click', onMapClick);
c'est inévitable. Il faudrait gérer l'évenement "click" depuis le calque.
Regarde à l'URL suivante, seuls les calques "parcellaire" et "PLU" réagissent au clique :
http://mairie.haraucourt.free.fr/SIG_2015/index.html
Hors ligne
#5 Thu 17 August 2017 09:23
- nico-29
- Participant assidu
- Lieu: Brest
- Date d'inscription: 2 Jun 2006
- Messages: 185
Re: GetFeaturesInfo leaflet
Dans l'URL que tu donnes (mairie haraucourt), les données ne sont pas accédées en WMS, mais sont déclarées en dur dans des objets geojson (voir le code source de la page) :
Code:
<script src="./calques/parcelles_2016.js"></script> <script src="./calques/PLU_graphique.js"></script> <script src="./calques/bati_2015.js"></script> <script src="./calques/sections.js"></script> <script src="./calques/risque_salin.js"></script> <script src="./calques/empl_reserves.js"></script> <script src="./calques/impl_obligatoire.js"></script> <script src="./calques/paquis.js"></script> <script src="./calques/cimetiere.js"></script> <script src="./calques/b_versants.js"></script> <script src="./calques/courbes.js"></script> <script src="./calques/occupation_sol.js"></script>
Nico
Hors ligne
#6 Thu 17 August 2017 10:10
- tati
- Participant occasionnel
- Date d'inscription: 6 Jun 2017
- Messages: 27
Re: GetFeaturesInfo leaflet
Merci pour vous deux.
Effectivement il s'agit des données geojson dans l'URL.
Je veux ajouter que j'avais essayé d'afficher mes couches sur leaflet en flux WFS mais ça ne marche pas pour l'une de mes couches car c'est une couche de 40 000 lignes et 124 colonnes. Ce qui fait que le navigateur bug.
J'ai fait une recherche et j'ai vu que quand il s'agit des données massives on utilise le protocole WMS. C'est pourquoi j'ai utilisé ce dernier.
Quelqu'un pourrait-il me donner plus d'informations ou de conseils pour que j'affiche mes couches correctement ??
Hors ligne
#7 Thu 17 August 2017 11:06
- nworr
- Participant actif
- Date d'inscription: 10 Apr 2014
- Messages: 77
Re: GetFeaturesInfo leaflet
Je ne connais pas bien Leaflet mais je dirai que c'est sur la bonne voie.
Il faudrait par contre gérer le retour de la requete GetFeatureInfo et afficher le résultat uniquement si il y a des valeurs.
Il y a aussi sur http://leafletjs.com/plugins.html un plugin "leaflet.wms" qui à l'air de pas mal marcher : http://heigeo.github.io/leaflet.wms/examples/
Hors ligne
#8 Thu 17 August 2017 12:15
- cherbe
- Participant occasionnel
- Date d'inscription: 1 Nov 2008
- Messages: 41
Re: GetFeaturesInfo leaflet
Effectivement il s'agit des données geojson dans l'URL.
A mon avis, peu importe la source. Dans tous les cas, il y a création d'une variable pour afficher une couche et c'est ce layer qu'il faut rendre cliquable plutôt que la carte entière.
Chez toi, ça devrait ressembler à ceci mais pas sûr que ce soit fonctionnel :
var points = L.tileLayer.wms("http://localhost:8080/geoserver/cite/wms?", {
layers: 'cite:sirene',
format: 'image/png',
clickable: true,
onEachFeature: function (ta fonction),
transparent: true
});
N'oublie pas de supprimer ceci : map.addEventListener('click', onMapClick);
Dernière modification par cherbe (Thu 17 August 2017 12:17)
Hors ligne
#9 Thu 17 August 2017 13:45
- tati
- Participant occasionnel
- Date d'inscription: 6 Jun 2017
- Messages: 27
Re: GetFeaturesInfo leaflet
Merci Cherbe.
Votre idée n'est pas bête mais dommage ça ne fonctionne pas
Peut-tu me dire que représente le paramètre 'ta fonction' ici ??
Dernière modification par tati (Thu 17 August 2017 13:47)
Hors ligne
#10 Thu 17 August 2017 15:04
- cherbe
- Participant occasionnel
- Date d'inscription: 1 Nov 2008
- Messages: 41
Re: GetFeaturesInfo leaflet
Peut-tu me dire que représente le paramètre 'ta fonction' ici ??
C'est la fonction onMapClick(e)à adapter et provenant de ton script
Dernière modification par cherbe (Thu 17 August 2017 15:05)
Hors ligne
#11 Thu 17 August 2017 18:38
- tati
- Participant occasionnel
- Date d'inscription: 6 Jun 2017
- Messages: 27
Re: GetFeaturesInfo leaflet
ça ne marche pas
Hors ligne
#12 Thu 17 August 2017 19:44
- cherbe
- Participant occasionnel
- Date d'inscription: 1 Nov 2008
- Messages: 41
Re: GetFeaturesInfo leaflet
met ici une copie de ton script
Hors ligne