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 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

tati a écrit:

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

tati a écrit:

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 sad sad
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

tati a écrit:

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 sad

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

 

Pied de page des forums

Powered by FluxBB