WFS Layer Not Display

Question

I created WFS GeoJson layer from GeoServer ,I got this url'http://localhost:8080/geoserver/trail/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=trail:sbi_branch_data&maxFeatures=50&outputFormat=application%2Fjson' ,I got example from OL3 examples From that code ,I tried some code in OpenLayer3 ,but giving some error.please help me .Thanks.

<!DOCTYPE html>
<html>
  <head>
    <title>WFS</title>
   <!-- <link rel="stylesheet" href="https://openlayers.org/en/v4.1.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.1.0/build/ol.js"></script>-->

   <link rel="stylesheet" href="css/ol.css" type="text/css" />
     <link rel="stylesheet" href="css/sample.css" type="text/css" />


    </head>

  <body>
    <div id="map" class="map"></div>
     <script src="js/ol.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function(extent) {
          return 'http://localhost:8080/geoserver/trail/ows?service=WFS&'+
          'version=1.0.0&request=GetFeature&typeName=trail:sbi_branch_data&'+
          'maxFeatures=50&outputFormat=application/json&srsname=EPSG:4326&' +
              'bbox=' + extent.join(',') + ',EPSG:4326';
        },
        strategy: ol.loadingstrategy.bbox
      });


      var vector = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
          })
        })
      });

      var raster = new ol.layer.Tile({
       // source: new ol.source.BingMaps({
         // imagerySet: 'Aerial',
        //  key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
      //  })
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [20.5937, 78.9629],
          maxZoom: 19,
          zoom: 12
        })
      });
    </script>
  </body>
</html>

Error: "XMLHttpRequest cannot load http://localhost:8080/geoserver/trail/ows?service=WFS&version=1.0.0&request…644126996,-13297.517049905844,22569.517044127,13455.442849905845,EPSG:4326. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

This is the cross domain scripting problem. You either have to enable CORS on geoserver or make a proxy class on your server to handle the requests to geoserver. — pavlos
Thanks for help,you have any idea how ton enable jsonp from geoserver. — Seema Barate
Anything wrong in this code .I enable CORS and JSONP but still i have error .please help me. — Seema Barate

Seema Barate Seema Barate · Accepted Answer · 2017-05-09T09:04:42

I got the solution,First I installed the Apache then modify the httpd.config file.I just put

ProxyRequests Off ProxyPreserveHost On <Proxy /geoserver> Require all granted </Proxy> ProxyPass /geoserver http://localhost:8080/geoserver ProxyPassReverse /geoserver http://localhost:8080/geoserver ProxyPass /geoserver http://localhost:8080/geoserver ProxyPassReverse /geoserver http://localhost:8080/geoserver

this code in httpd.config at the end of file. and then enabled this from httpd.config

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Then all my html files i stored in ht-docs in Apache ,then runs all the wfs files.

WFS Layer Not Display

1 Answers