Question

我在我的localhost中尝试从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>

问题是我的地图是空的。我只获得ZoomIn / ZoomOut控件。通过Google搜索问题，我看到了一个跨网站请求问题，我通过在 Geoserver-root /WEB_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>

然而，这并没有解决我的问题。谁能给我提示我缺少的东西？

将WFS图层添加到OpenLayers贴图中

0 个答案: