Le portail francophone de la géomatique

Bonjour,

Pour t'aider, il faudrait que tu précises ce que tu veux faire et avec quelle API (Leaflet, Openlayers)?

Je suppose que dans Geoserver, tu as stocké plusieurs données vecteurs. Par quel protocole tu charges ces données dans ton script : WFS ou WM(T)S?

Ensuite, tu déclenches une action au clic sur un pixel donné, tu veux montrer tous les attributs (properties) des objet géographiques (features) de chaque couche superposée? Juste quelques attributs ? d'une ou de toutes les couches?

En précisant ta demande, j'essaierai de t'aider.

Geomatick
http://geomatick.com

Dernière modification par geomatick (Tue 27 December 2016 20:37)

Bonjour,

tu as déclaré 8 couches wms (couche1, couche2,...) et au clic, on obtient les attributs de toutes les couches pour le pixel donné.
L'idée est donc de faire une boucle sur toutes les url de toutes les couches déclarées (ou visibles).

Dans ton code php ou html, tu déclares une <div id="info"></div> pour afficher les données.
Puis dans ton javascript, tu déclares toutes tes couches dans un tableau :

var couches = [couche1, couche2, ...];

var map = new ol.Map({
    /* Appel des couches de la carte */
    layers: couches,
        ...

Ensuite, voici la fonction de clic sur la carte :

            /* clic sur la carte et affichage des informations des couches wm(t)s en format html dans la div info */
            map.on('singleclick', function (evt) {
                // déclaration de la div info
                document.getElementById('info').innerHTML = '';
                // résolution et projection de la carte
                var viewResolution = map.getView().getResolution();
                var viewProjection = map.getView().getProjection();
                var url = '';
                // Boucle sur toutes les couches déclarées auparavant
                couches.forEach(function (layer, i, couches) {
                    // Condition facultative si les couches sont visibles et si les couches ne sont pas les fonds de carte comme OSM
                    if(couches[i].getVisible() && couches[i].get('name')!='Basemap') {
                        // Pour chaque couche, on obtient les données de l'url wms lié aux coordonnées, à la résolution et la projection du pixel cliqué
                        url = couches[i].getSource().getGetFeatureInfoUrl(evt.coordinate, viewResolution, viewProjection, {
                                // retour en format html mais d'autres format comme json sont possibles
                                'INFO_FORMAT': 'text/html',
                                // limitation du nombre d'objet géographique pour chaque couche
                                'FEATURE_COUNT': '300'
                        });
                        // Si l'url des couches wms est valide, on envoie ces informations dans la div info
                        if(url){
                            document.getElementById('info').innerHTML += '<iframe seamless src="' + url + '"></iframe>';
                        }
                    }
                });
            });


J'espère que cela répond à ta question. Je ferai un tutoriel sur mon site d'ici peu.

Geomatick
http://geomatick.com

Bonsoir, toujours je suis bloquée, voici ma focntion qui charge le map et qui contient l’événement Click,

function init(){

    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.addOnLoad(function () {

   geographic = new OpenLayers.Projection("EPSG:4326");
   mercator = new OpenLayers.Projection("EPSG:3857");   //4326 les couches ne se superposent pas!
   
   
   world = new OpenLayers.Bounds(nord,est,sud,ouest).transform( geographic, mercator );
   SBA_center = new OpenLayers.LonLat(-0.6308500, 35.1899400).transform( geographic, mercator );
   myoption = { projection: mercator, displayProjection: geographic, units: "dd",/* maxExtent: world,*/ maxResolution: 156543.0399 };
  //init();
   
    map = new OpenLayers.Map("map_canvas",myoption);

    osm = new OpenLayers.Layer.OSM();
    map.addLayer(osm);

var vlayer = new OpenLayers.Layer.Vector( "route" );
//Ajout du layer à la carte
map.addLayer(vlayer);
// Ajout de la barre d'outil de dessin
map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));
map.addControl(new OpenLayers.Control.LayerSwitcher());


   map.setCenter(SBA_center, 7);
 
           var   click1 = new OpenLayers.Control.Click();

              map.addControl(click1);

              click1.activate();

   var markers = new OpenLayers.Layer.Markers( "Markers" );
   map.addLayer(markers);

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://localhost:8084/Geo/marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-60874.76723, 4147318.47522),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(-60874.76723, 4147318.47522),icon.clone()));
   map.addControl (new OpenLayers.Control.OverviewMap ());
   map.addControl(new OpenLayers.Control.PanZoomBar({position: new OpenLayers.Pixel(3, 6)})
 
   
   );
 
    map.addControl (new OpenLayers.Control.MousePosition ());

   
    //lat_=OpenLayers.Control.MousePosition()
    map.addControl(new OpenLayers.Control.ScaleLine());

    });

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {               
                defaultHandlerOptions: {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },

                initialize: function(options) {
                    this.handlerOptions = OpenLayers.Util.extend(
                        {}, this.defaultHandlerOptions
                    );
                    OpenLayers.Control.prototype.initialize.apply(
                        this, arguments
                    );
                    this.handler = new OpenLayers.Handler.Click(
                        this, {
                            'click': this.trigger
                        }, this.handlerOptions
                    );
                },

                trigger: function(e) {
                    var lonlat = map.getLonLatFromPixel(e.xy);
                     lonlat.transform(
                      new OpenLayers.Projection("EPSG:900913"),
                      new OpenLayers.Projection("EPSG:4326")
                    );
                     document.getElementById("longit").value=""+lonlat.lon;
                     document.getElementById("latit").value=""+lonlat.lat ;
                   
                    alert("Vos Cordonnées " + lonlat.lat + " Latitude, " +
                                              + lonlat.lon + " longitude");
                }

            });
           
           
                       

}

voici mes couches:

   // layers: couches,
    couche1="les_caracteristiques_geographiques:route1";
    couche2="les_caracteristiques_geographiques:puits1";
    couche3="les_caracteristiques_geographiques:algerie1";
    couche4="les_caracteristiques_geographiques:limites_communales1";
    couche5="délimitaion_des_terres_à_voccation_céralière:grande_zone_geo";
    couche6="délimitaion_des_terres_à_voccation_céralière:carte_occupation_sol_nov2014_sba1111111111";
    couche7="délimitaion_des_terres_à_voccation_céralière:carte_occupation_sol_mars2015_sba_rep1";
    couche8="délimitaion_des_terres_à_voccation_céralière:delimitation_espace_cerealier_rep111";

pouvez- vous la modifier?

Merci pour votre aide ^^.