javascriptjsonpopenlayers-3geoservergetfeatureinfo

Query multiple features in multiple layers in Openlayers 3


I have been using the example shown here (https://astuntechnology.github.io/osgis-ol3-leaflet/ol3/05-WMS-INFO.html) to try and retrieve features at a coordinate from multiple TileWMS layers I have set up in my application.

This example has been tweaked so it now returns data in JSONP using the reqwest library, but now I am trying to figure out the best way to adapt this to include multiple layers and multiple features.

I am thinking of using the map.forEachLayerAtPixel function to retrieve all layers present at the map click location, and then within if statements call the feature and add this to a variable to build a dynamic html table of results.

I don't know if this is the best approach but is the only way I can think of doing it so I am able to retrieve the information in a way I can lay it out specifically.

Below is the javascript for my on map click function but it is not returning the pop up and doesn't display any errors.

I am not sure if I am using the correct approach, and does anything look incorrect with the below?

Thanks

var popup = new ol.Overlay.Popup();
map.addOverlay(popup);

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

  if($(window).width() <= 767 && document.getElementById('sidebar').style.display == 'block') {
    $('#sidebar').toggle();
    $(".navbar-collapse.in").collapse("hide");
    map.updateSize();
    return false;
  }
  // Hide existing popup and reset it's offset
    popup.hide();
    popup.setOffset([0, 0]);

    var displayedLayers = [];
    var content = "";

    map.forEachLayerAtPixel(evt.pixel, function(layer) {
      displayedLayers.push(layer.get('name'));
    });

    if ($.inArray('layer62', displayedLayers) > -1) {
      var url = layer62
                    .getSource()
                    .getGetFeatureInfoUrl(
                        evt.coordinate,
                        map.getView().getResolution(),
                        map.getView().getProjection(),
                        {
                            'INFO_FORMAT': 'text/javascript',
                            'format_options': 'callback:results',
                            'propertyName': 'definition'
                        }
                    );

        reqwest({
            url: url,
            type: 'jsonp',
            jsonpCallbackName: 'results'
        }).then(function (data) {
            var feature = data.features[0];
            var props = feature.properties;
            content += "<h4>Flood Zone 3</h4><p>" + props.definition + "</p>";
        });
    }    
    if ($.inArray('layer63', displayedLayers) > -1) {
      var url = layer63
                    .getSource()
                    .getGetFeatureInfoUrl(
                        evt.coordinate,
                        map.getView().getResolution(),
                        map.getView().getProjection(),
                        {
                            'INFO_FORMAT': 'text/javascript',
                            'format_options': 'callback:results',
                            'propertyName': 'definition'
                        }
                    );

        reqwest({
            url: url,
            type: 'jsonp',
            jsonpCallbackName: 'results'
        }).then(function (data) {
            var feature = data.features[0];
            var props = feature.properties;
            content += "<h4>Flood Zone 2</h4><p>" + props.definition + "</p>";
        });
    }
    return content;
    popup.show(evt.coordinate, content);    
});

Solution

  • EDITED original answer as it wasn't correct, this one seems to work. It's jus a test based in your code but changes the way the popup is handled:

    var layers = [
    new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://demo.opengeo.org/geoserver/wms?',
            params: {
                'LAYERS': 'ne:ne',
                    'TILED': true,
                    'version': '1.1.0'
            },
            serverType: 'geoserver',
        })
    }),
    new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://demo.opengeo.org/geoserver/wms?',
            params: {
                'LAYERS': 'ne:ne',
                    'TILED': true,
                    'version': '1.1.0'
            },
            serverType: 'geoserver',
        })
    })
    
    
    ];
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');
    var popup = new ol.Overlay( /** @type {olx.OverlayOptions} */ ({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    }));
    var map = new ol.Map({
        layers: layers,
        target: 'map',
        overlays: [popup],
        view: new ol.View({
            center: [327641, 4149464],
            zoom: 3,
            //EPSG: 25830
        })
    });
    
    map.on('singleclick', function (evt) {
     content.innerHTML = "";
    
        var displayedLayers = [];
        var responses = 0;
    
        var url = layers[0].getSource()
            .getGetFeatureInfoUrl(
        evt.coordinate,
        map.getView().getResolution(),
        map.getView().getProjection(), {
            'INFO_FORMAT': 'text/javascript',
                'format_options': 'callback:parseResponse',
                'propertyName': 'name'
        });
    
        reqwest({
            url: url,
            type: 'jsonp',
            jsonpCallbackName: 'parseResponse'
        }).then(function (data) {
            var feature = data.features[0];
            var props = feature.properties;
            content.innerHTML += "<h4>First Layer</h4><p>" + props.name + "</p>";
           popup.setPosition(evt.coordinate);
        });
    
        // Second layer
        var url = layers[1].getSource()
            .getGetFeatureInfoUrl(
        evt.coordinate,
        map.getView().getResolution(),
        map.getView().getProjection(), {
            'INFO_FORMAT': 'text/javascript',
                'format_options': 'callback:parseResponse',
                'propertyName': 'name'
        });
    
         reqwest({
            url: url,
            type: 'jsonp',
            jsonpCallbackName: 'parseResponse'
        }).then(function (data) {
            var feature = data.features[0];
            var props = feature.properties;
            content.innerHTML += "<h4>Second layer</h4><p>" + props.name + "</p>";
           popup.setPosition(evt.coordinate);
        });
    
    });  
    

    Jsfiddle here: http://jsfiddle.net/fbma/1pchmpoo