2017-04-27 86 views
0

我从GeoServer创建了WFS GeoJson图层,我得到了这个网址'http://localhost:8080/geoserver/trail/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=trail:sbi_branch_data&maxFeatures=50&outputFormat=application%2Fjson',我从OL3例子中得到了一个例子从那个代码中,我尝试了OpenLayer3中的一些代码,但是给了一些error.please帮助我。 。WFS图层不显示

<!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> 

错误: “的XMLHttpRequest无法加载http://localhost:8080/geoserver/trail/ows?service=WFS&version=1.0.0&request ... 644126996,-13297.517049905844,22569.517044127,13455.442849905845,EPSG:。4326号‘访问控制允许来源’标头出现在所请求的资源产地“空'因此不允许访问。“

+2

这是跨域脚本问题。您必须在geoserver上启用CORS或在服务器上创建代理类来处理对geoserver的请求。 – pavlos

+0

看到https://gis.stackexchange.com/questions/101679/same-origin-policy-problem-using-wfs-t-with-geoserver-openlayers-3 –

+0

感谢您的帮助,你有任何想法吨如何启用jsonp来自geoserver。 –

回答

0

我得到了解决,首先,我再安装Apache的修改httpd.config file.I只是把

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

这段代码的httpd。配置在文件的末尾。 然后启用该从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 

然后我存储在Apache的HT-docs的我所有的HTML文件,然后运行所有的世界粮食首脑会议的文件。