1

I use OL3 together with geoserver to display one WMS layer. Then I use the GetFeatureInfo to display some of the data on button click. I want to prevent to show the popup when I click outside the layer's features (as shown in the attachment)enter image description here

How can I do this in OL3? This is the part of the code, which takes care the getFeatureInfo:

map.on('singleclick', function (evt) {

  var viewResolution = map.getView().getResolution();
  var coord = evt.coordinate;
      if (grid_layer.getVisible() && grid_layer.get('name') != 'Basemap') {

          var url = grid_layer.getSource().getGetFeatureInfoUrl(coord, viewResolution, 'EPSG:3857', {
              'INFO_FORMAT': 'text/html',
              'FEATURE_COUNT': '1',
              'propertyName': 'url'
          });

          if (url) {
              overlay.setPosition(coord);
              content.innerHTML = '<iframe src="' + url + '" style="border:0px #BD8D46 dotted;" scrolling="auto" frameborder="no" align="center"></iframe>';

          }
      }
  });
  • Are there two layers in total (the base map and the GeoServer WMS layer)? or is the image really just one layer? – nmtoken Nov 14 '17 at 12:53
  • @nmtoken Yes there are two layers. The basemap (bing maps) and the WMS layer from geoserver – user1919 Nov 14 '17 at 13:02
1

i know this is an old thread but maybe it could help somebody, i use a little trick to check the length of the return data

       info = new OpenLayers.Control.WMSGetFeatureInfo({
        url: 'http://blala.com/wms/', 
        title: 'Identify features by clicking',
        queryVisible: true,
        eventListeners: {
            getfeatureinfo: function(event) {
                if (event.text.length>658) // <<=== use this, empty feature return 658 character or just check the length using alert(event.text.length);

                {

                var pops = map.popups;
                 for (var a = 0; a < pops.length; a++) {
                     if (pops.length == 1) {
                         map.removePopup(map.popups[0]);
                     }
                 };

                map.addPopup(new OpenLayers.Popup.FramedCloud(
                    "ayam", 
                    map.getLonLatFromPixel(event.xy),
                    null,
                    event.text,
                    null,
                    true
                ));
                }
            }
        }
    });

     map.addControl(info);
    info.activate();
1

Using 'INFO_FORMAT' text/xml or application/json would be more elegant to check if response has some features. But as you use text/html, you have to count the amount of table rows in the HTML response.

You have to use a AJAX request to get the HTML code and then check if there are more than 1 table rows (as an empty response contains 1 table row). So I would change the code after getting the url to this:

$.get(url).then(function(response) {
    if (response.split("<TR>").length - 2 !== 0) {
        overlay.setPosition(coord);
        content.innerHTML = '<iframe src="' + url + '" style="border:0px #BD8D46 dotted;" scrolling="auto" frameborder="no" align="center"></iframe>';
    }
});

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.