Question

我必须使用Openlayers 3.9.0从我的Geoserver加载WFS图层到我的网站。

根据the manual，有两种方法可以加载功能，loader（ol.FeatureLoader）和url（ol.FeatureUrlFunction）。

我不知道两者之间的区别。他们都用来加载功能loader，没有设置任何网址，看起来更复杂。

我试试

var url =  'http://localhost:8080/geoserver/mapname/wfs?service=WFS&'+'version=1.0.0&request=GetFeature&typeName=mapname:awesomelayer&'+'outputFormat=application/json&maxFeatures=50'    
var vectorSource = new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          loader: function(extent){
                $.ajax({
                url: url,
                type:'GET',
                dataType: 'jsonp'
                }).done(loadFeatures);
           },
          strategy: new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20}))
});

var loadFeatures = function(response) {
  var features = vectorSource.readFeatures(response);
  vectorSource.addFeatures(features);
};

并且没有任何错误，但也没有任何功能。

然后我只是设置了

var url =  'http://localhost:8080/geoserver/mapname/wfs?service=WFS&'+'version=1.0.0&request=GetFeature&typeName=mapname:awesomelayer&'+'outputFormat=application/json&maxFeatures=50'    
var vectorSource = new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          strategy: new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20})),
          url: function(extent, resolution, projection){return url}
});

并且工作了。

我没有区别，url更聪明，更快，不需要loadFeatures功能。我是红色的手册，但在实践中，就代码而言，我无法理解它。什么是loader，为什么它没有设置URL以及何时使用它？我在这里缺少什么？

由于

Answer 1

首先想到的是：捕捉错误。如果您的服务器能够捕获错误并将其返回到响应中，您可能希望在加载器中读取它们并采取相应的行动。

第二个原因是在将这些功能添加到源之前计算/执行某些操作。这是example in an other thread from StackOverflow。它具有使用装载机的两个原因。

如果您在添加数据之前不需要对数据做任何特殊处理，或者如果您不需要管理错误，那么url就足以满足您的要求了。

Answer 2

我想这会更好

<html>
  <head>
    <!-- Here are your head stylesheets and meta-tags -->
    <!-- Include stylesheet of loading-bar plugin -->
    <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
  </head>

  <body>
    <!-- Include Javascript needed for loading-bar plugin -->
    <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
    <!-- some code... -->
    <!-- some code... -->
    <!-- some code... -->
    <div>
      <h3>Apparence du compteur</h3>
      <br>
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      <div class="row">...</div>          
    </div>
    <!-- some code... -->
    <!-- some code... -->
    <!-- some code... -->
    <div>
      <h3>Apparence du compteur 2</h3>
      <br>
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      <div class="row">...</div>          
    </div>
    <!-- some code... -->
    <!-- some code... -->
    <!-- some code... -->
  </body>
</html>

Answer 3

我刚刚遇到了与您相同的问题。使用url的方法效果很好，但是使用Loader时遇到了问题。

这是问题所在，从您的url中我注意到您的outputFormat=application/json，同时在loader function中指定了dataType: 'jsonp'。

dataType: 'jsonp'仅在您的outputFormat=text/javascript下有效。请参阅此link by GeoServer，它以正确的语法说明格式。

因此，您必须使用JSONP而不是JSON，要启用JSONP，请遵循此处https://gis.stackexchange.com/questions/57494/geoserver-2-3-how-to-enable-jsonp中的回答。之后，将您的outputFormat更改为outputFormat=text/javascript

Vector Source上的URL和Loader之间的区别 - openlayers 3

3 个答案: