1

I have this code from an Udemy course. Everything works except I can not visualize the vector layer. I can see the JSON file - wfs_url correctly but not visualize vectorSource (the data points selected in wfs_url).

<!DOCTYPE html>

Working with Vector Data 

  var view = new ol.View({
      center: [-9015705,4026797],
      zoom: 11      
      });

   var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    view: view
  });


var theurl = 'http://localhost:8050/geoserver/richland_postgres/wms';

var bk79 = new ol.layer.Image({
      source: new ol.source.ImageWMS({
        url: theurl,
        params: {'LAYERS': 'richland:bk79'},
        serverType: 'geoserver'
      })    
    });     
 bk79.setOpacity(0.3);



var cqlfilter = 'DWITHIN(geometry,Point(503909 3768402),5000,meters)';

var schoolcql = new ol.layer.Image({
       source: new ol.source.ImageWMS({
        url: theurl,
        params: {'LAYERS': 'richland_postgres:schools','CQL_FILTER': cqlfilter},
        serverType: 'geoserver'
      })
    }); 


wfs_url = 'http://localhost:8050/geoserver/richland_postgres/wfs?service=WFS&' +
          'version=1.1.0' +
          '&request=GetFeature' +
          '&typename=richland_postgres:schools&' +
          '&CQL_FILTER=' + cqlfilter + '&' +
          'outputFormat=application/json&srsname=EPSG:3857&' +
          ',EPSG:3857';
prompt('',wfs_url);

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {
      return 'http://localhost:8050/geoserver/richland_postgres/wfs?service=WFS&' +
          'version=1.1.0' +
          '&request=GetFeature' +
          '&typename=richland_postgres:schools&' +
          '&CQL_FILTER=' + cqlfilter + '&' +
          'outputFormat=application/json&srsname=EPSG:3857&' +
          ',EPSG:3857';
    },
    strategy: ol.loadingstrategy.bbox
  });

  var vector = new ol.layer.Vector({
    source: vectorSource
  });


map.addLayer(bk79);
map.addLayer(schoolcql);
map.addLayer(vector);

</script>

Improve this question
1
  • Are you sure you get a JSON output when you enter the url in a browser? Looks like you are missing something here. srsname=EPSG:3857&'+',EPSG:3857'
    – pavankguduru
    Sep 3, 2017 at 18:30

1 Answer 1

Reset to default
1 
wfs_url = 'http://localhost:8050/geoserver/richland_postgres/wfs?service=WFS&' +
          'version=1.1.0' +
          '&request=GetFeature' +
          '&typename=richland_postgres:schools&' +
          '&CQL_FILTER=' + cqlfilter + '&' +
          'outputFormat=application/json&srsname=EPSG:3857&' +
          ',EPSG:3857';

You are missing this part 'bbox=' + extent.join(',') in your code.

This is from OpenLayers WFS example for reference.

var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {
      return 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
          'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
          'outputFormat=application/json&srsname=EPSG:3857&' +
          'bbox=' + extent.join(',') + ',EPSG:3857';
    },
    strategy: ol.loadingstrategy.bbox
});
Improve this answer
2
  • You don't need a BBOX or srsName for a GetFetaure request ~ the following request works just fine: ahocevar.com/geoserver/…
    – nmtoken
    Jan 21, 2018 at 16:28
  • Yes that should be fine to get the data but I have experienced data not being projected correctly without those. May be I was doing something wrong.
    – pavankguduru
    Jan 24, 2018 at 3:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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