Openlayers 3 将WFS图层添加到OpenLayers地图中_Openlayers 3_Geoserver

Openlayers 3 将WFS图层添加到OpenLayers地图中

openlayers-3

Openlayers 3 将WFS图层添加到OpenLayers地图中,openlayers-3,geoserver,Openlayers 3,Geoserver,我在本地主机中尝试从Geoserver实例添加WFS层时遇到了很多困难。我遵循OpenLayers网站a-la-lettre的原始示例，只是更改URL值。代码如下： <!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="OpenLayers-v4.1.1/ol.css" type="text/css"> <style>

我在本地主机中尝试从Geoserver实例添加WFS层时遇到了很多困难。我遵循OpenLayers网站a-la-lettre的原始示例，只是更改URL值。代码如下：

    <!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="OpenLayers-v4.1.1/ol.css" type="text/css"> 
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="OpenLayers-v4.1.1/ol.js" type="text/javascript"></script> 
    <title>OpenLayers Map</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'http://localhost/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:Communes&outputFormat=application%2Fjson',
        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 map = new ol.Map({
        layers: [vector],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [30.158, -1.993],
          maxZoom: 19,
          zoom: 12
        })
      });
      map.zoomToMaxExtent();
    </script>
  </body>
</html>


.地图{
高度：400px；
宽度：100%；
}
开放层地图
我的地图
var vectorSource=新的ol.source.Vector({
格式：新建ol.format.GeoJSON（），
网址：'http://localhost/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:Communes&outputFormat=application%2Fjson',
策略：ol.loadingstrategy.bbox
});
var vector=新的ol.layer.vector({
来源：矢量源，
风格：新的ol风格({
笔划：新的ol风格笔划({
颜色：“rgba（0,0,255,1.0）”，
宽度：2
})
})
});
var map=新ol.map({
图层：[矢量]，
目标：document.getElementById（'map'），
视图：新ol.view({
中间：[30.158，-1.993]，
maxZoom:19，
缩放：12
})
});
zoomToMaxExtent（）；

问题是我的地图是空的。我只得到ZoomIn/ZoomOut控件。通过谷歌搜索这个问题，我看到有人提到了跨站点请求问题，我通过在Geoserver root/WEB\u INF/WEB.xml中添加以下代码解决了这个问题：

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>


克斯菲尔特
org.apache.catalina.filters.CorsFilter
克斯菲尔特
/*

然而，这并没有解决我的问题。

有人能告诉我我遗漏了什么吗？

你没有firebug错误吗？？？？如果有错误，请检查您的geoserver日志以确定错误。如果所有其他操作都失败，在浏览器中打开url会显示什么？在浏览器中打开url会显示JSON格式的数据。