Le portail francophone de la géomatique

Bonsoir,
Pour réaliser des requête tu va devoir interroger ta couche de donner à l'aide de GeoServer. En cliquant tu souhaites savoir ce qu'il y a aux Lon/Lat de ta souris. Il te faut donc un contrôle pour obtenir ces valeurs qui te serviront comme argument de requête.
Ensuite, tu peux réaliser une requête sur le WMS  type getFeatureInfo qui utilisera en paramètre les coordonnées de ta souris au clic.
N'hésites pas à regarder la documentation GeoServer sur les WMS / WFS pour trouver les services qui te conviennent.

Pour afficher les informations dans une div, tu dois au préalable créer ta div sur ta page avec un ID et ensuite remplir cette div en l'appelant par son ID ainsi :
document.getElementById("monId").innerHTML = "mon nouveau texte à afficher";

Enfin, inspire toi du code de cette exemple, je ne sais pas si tu utilises OpenLayers mais le principe reste le même :
http://dev.openlayers.org/examples/getf … ntrol.html

Si tu ne sais pas comment regarder le code sur une page, renseignes toi sur la console et le debugger Ce sont de puissants alliés

En effet il y a des fonctions à "exécuter" pour lancer la requête du navigateur vers le GeoServer. GeoServer devra être déjà connecté aux bases de données Postgis.

L'exemple que j'ai fourni réalise exactement ce dont tu as besoin. Pour les filtres dans une requête, tu peux regarder si les filtres CQL peuvent t'aider (voir la doc GeoServer).

1) Ajoute un point
2) Prend les coordonnées X/Y du point
3) Utilise ces coordonnées pour l'insérer dans une requête WFS sur ta couche (fouille dans la doc GeoServer pour voir comment réaliser ceci ou les nombreux post en ligne).

Tu va avoir dans ta requête des paramètres de ce type :

request: getfeature
version: 1.0.0
service: wfs
typename: tonentrepot:tacouche
outputFormat: application/json
filter:<Filter xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>shape</PropertyName><gml:Point><gml:coordinates>-189726.98564965,6127342.3921418</gml:coordinates></gml:Point></Intersects></Filter>

/!\ Tu remarqueras que tes coordonnées sont dans la balise <gml:coordinates>-189726.98564965,6127342.3921418</gml:coordinates>

Enfin, tu réalises cette requête gràace à une requête Ajax (en méthode GET c'est plus simple je trouve) ou alors avec OpenLayers.Request.GET().

Le retour de cette requête est au format Json, OpenLayers2 te permet de récupérer un JSON et de l'utiliser en javascript.

                            var request = new OpenLayers.Request.GET({
                                url: WFSLayerUrl,
                                params: WFSsettings,
                                callback: function(request) { // Callback c'est le retour de la réponse
                                    // read json and zoom to extent
                                    if (request.responseText) { // si tu as une réponse
                                        var featureJson = request.responseText;
                                        var geojson_format = new OpenLayers.Format.GeoJSON();
                                        var readJson = geojson_format.read(featureJson); // met la réponse dans une variable une fois décodée

                                        //Exploite la réponse comme tu veux pour arriver à quelque chose comme
                                        map.zoomToExtent(layer.getDataExtent());

                                    } else { // important pour connaitre la raison d'un nom affichage d'info par exemple
                                        console.log("Error ", request.responseText);
                                    }
                                }
                            });

Tu veux donc obtenir les informations attributaires d'un élément dont la géométrie intersecte les coordonnées de ton clic et ensuite, afficher ces informations attributaires dans une div sur ta page HTML sous la carte c'est bien cela ?
Si c'est cela tu as toutes les informations pour y arriver, l'affichage dans la div se fera en décodant le JSON pour en avoir les infos puis, pour chaque infos, les charger dans la div avec ce code :

// avec une div dont l'ID = "content"
var string = "Hello world !";

// comme tu as déjà fait pour les long / lat
document.getElementById("content").innerHTML = string;


Mais qu'attends tu de cette div, ton besoin est vague en dehors d'y intégrer du contenu ? Tu veux bien y intégrer le contenu du JSON ou le contenu d'un autre JSON retourné par une requête ?

Dernière modification par Nekultra (Thu 02 February 2017 09:51)

Désolé je vais être insistant mais as-tu bien regardé le code de cet exemple ?

http://dev.openlayers.org/examples/getf … ntrol.html
Pour voir le code utilise la console. Sous Chrome c'est la touche F12 et dans l'onglet "sources" tu trouvera dans l'arborescence de gauche le style CSS + le code javascript dans une feuille HTML nommée "getfeatureinfo-control.html".

Si tu adaptes ce code à tes besoin tu devrais t'en sortir sans problème !

Je pense que cet exemple est exactement le code que tu recherches. le clic sur un objet de la couche retourne des informations qui vont peupler une div. Dans cet exemple les informations reviennent sous forme de tableau. Je ne pourrais pas te faire ton code par manque de temps mais tu trouvera comment mettre en forme le code HTML.

Bonjour,

J'ai créer une petite appli avec postgres et geoserver, je modifie mes couches par la biais de la carto avec un qgis qui modifie ma base postgres et donc modifie mon appli car tout est lié. Mais j'ai un soucis c'est que j'aimerai que geoserver ne m'affiche que certains champs et pas toute ma base dans l'encadré en bas "clic sur l'élément' mais je n'arrive pas a trouvé ou geoserver interroge la base pour récupérer ces éléments.