2

In case of OpenLayers 2 I am able to get feature information but how to get feature information from vector or WFS layer in OpenLayers 3

Below code how to extract information of the vector layer if multiple vectors are there?

  var layerWFS = new ol.layer.Vector({
  source: new ol.source.Vector({
    loader: function(extent) {
      $.ajax('http://localhost:8080/geoserver/wfs', {
        type: 'GET',
        data: {
          service: 'WFS',
          version: '1.1.0',
          request: 'GetFeature',
          typename: 'dgm:all_block_boundary_point',
          srsname: 'EPSG:3857',
          bbox: extent.join(',') + ',EPSG:3857'
        }
      }).done(function(response) {
        layerWFS
        .getSource()
        .addFeatures(new ol.format.WFS()
          .readFeatures(response));
         // console.log(response);
      });
    },
    strategy: ol.loadingstrategy.bbox,
    projection: 'EPSG:3857'
  })
}); 
map.addLayer(layerWFS);
  • Do you mean GetFeatureInfo request of a WMS, or GetFeature request of a WFS? – nmtoken May 30 '18 at 12:08
  • getFeatureInfo request for WFS – sanju verma Jun 1 '18 at 5:14
  • There is no such operation. – nmtoken Jun 1 '18 at 7:06
  • i have found solution using var selectSingleClick = new ol.interaction.Select(); map.addInteraction(selectSingleClick); map.on('singleclick', function(event){ layerWFS.once('precompose',function(event){ var selectedFeatures = selectSingleClick.getFeatures(); readFeature(selectedFeatures); }); }); – sanju verma Jun 1 '18 at 7:16
  • You should convert your comment into an answer for the question – nmtoken Jun 1 '18 at 11:02
1

I have found solution to get feature information of vector layer

var selectSingleClick = new ol.interaction.Select();
map.addInteraction(selectSingleClick);


map.on('singleclick', function(event){  
    layerWFS.once('precompose',function(event){
      var selectedFeatures = selectSingleClick.getFeatures();
      readFeature(selectedFeatures);
    });
});

function readFeature(features){

   var myfeature = features.item(0);

       Msg = "<center><h4><b>"+myfeature.get('block_name')+" Block</b></h4></center>";
               Msg += "<center><table border='1'>";
                Msg += "<tr><td style='padding: 2px;'>" + 'Block Name' + "</td><td style='padding: 2px;'>" + myfeature.get('block_name') + "</td></tr>"; 
                Msg += "<tr><td style='padding: 2px;'>" + 'Latitude' + "</td><td style='padding: 2px;'>" + myfeature.get('latitude') + "</td></tr>"; 
                Msg += "<tr><td style='padding: 2px;'>" + 'Longitude' + "</td><td style='padding: 2px;'>" + myfeature.get('longitude') + "</td></tr>"; 
                Msg += "</table></center>"; 
    document.getElementById('featuredetails').innerHTML = Msg;


                   var opt = {
                        autoOpen: false,
                        modal: false,
                        width: 300,
                        height:430,
                        hide: "puff",
                        show : "clip",
                         position : "right",
                        title: 'INFORMATION', 

                      };
            $(document).ready(function() {
              $("#featuredetails").dialog(opt).dialog("open").parents().css({"z-index": "999"});
              $(".ui-widget-overlay").css({"display" : "none"});
            });

}
  • I would like to use you example but I get an error that myfeature is undefined – Asanda Nov 28 '18 at 11:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.