[GIS] Vector layer not displaying in OpenLayers

geoserveropenlayersvector

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>

Best Answer

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
});
Related Question