Le portail francophone de la géomatique

  /*DEFINITION COUCHE WMS*/
    var osm = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var wms_source = new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/wms',
    params: {
              'LAYERS': 'gaez_fao:gleyic_layer',
              'TILED': true
              },
    serverType: 'geoserver',
    crossOrigin: 'anonymous'
   });

   var wms = new ol.layer.Tile({
    source: wms_source
  });

 /*DEFINITION COUCHE WFS*/

var vector_source = new ol.source.Vector({
      format: new ol.format.GeoJSON(),
      url: function(extent, resolution, projection) {
        return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=gaez_fao:gleyic_shapefile_table&' +
          'outputFormat=application/json&srsname=EPSG:4326&' +
          'bbox=' + extent.join(',') + ',EPSG:4326';
      },
      strategy: ol.loadingstrategy.bbox
    });

  var wfs = new ol.layer.Vector({
      source: vector_source,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'green',
          width: 2
        })
      })
    });

  /*DEFINITION MAP*/
  var view = new ol.View({
        //laos
        center: [11500000, 2000000],
        //zoom: 6
        zoom: 2
      });

      var map = new ol.Map({
        layers: [osm,wms,wfs],
        overlays: [overlay],
        target: 'map',
        view: view
      });


      map.on('singleclick', function(evt) {
        //RECUPERATION DES COORDONNEES DU CLIC
        var source = evt.target;
        console.log('evt.coordinate[0] = ' + evt.coordinate[0]);
        console.log('evt.coordinate[1] = ' + evt.coordinate[1]);
        var lonlat = ol.proj.transform(evt.coordinate,'EPSG:3857','EPSG:4326')
        console.log('lon = ' + lonlat[0]);
        console.log('lat = ' + lonlat[1]);
        
        //COUCHE WFS
        if(wfs.getSource().getState() == 'ready'){
          var features = wfs.getSource().getFeatures();
          //récupération de toutes les coordonnées des polygones
          features.forEach(function(feature){
            console.log(feature.getGeometry().getCoordinates()); // coordonnée
            console.log(feature.getId()); // id de tous mes polygones
          });

          //AFFICHAGE DANS UNE BULLE --> AU LIEU DE 10001, J'AIMERAIS INDIQUER L'ID DE MON POLYGONE SÉLECTIONNE
          content.innerHTML = '<p>pixel value:</p><code>' + features[10001].N.pixel_value + '</code>';
          console.log('features[10001].N.geometry = ' + features[10001].N.geometry);
          overlay.setPosition(evt.coordinate);
        }
      });