矢量源上的 URL 和 Loader 之间的区别 - openlayers 3答案

【问题标题】：difference between URL and Loader on Vector Source - openlayers 3矢量源上的 URL 和 Loader 之间的区别 - openlayers 3
【发布时间】：2015-10-14 18:36:42
【问题描述】：

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

根据the manual，加载功能有两个选项，loader(ol.FeatureLoader) 和url(ol.FeatureUrlFunction)。

我不明白两者之间的区别。他们都是用来加载特性的，loader，没有设置任何URL，看起来比较复杂。

我试试

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 以及何时使用它？我在这里错过了什么？

谢谢

【问题讨论】：

标签： vector openlayers-3

【解决方案1】：

想到的第一个原因：捕捉错误。如果您的服务器能够捕获错误并在响应中返回它们，您可能希望在加载器中读取它们并采取相应措施。

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

如果您在添加数据之前不需要对数据执行任何特殊操作，或者如果您不需要管理错误，那么url 确实可以满足您的要求。

【讨论】：

好的，现在说得通了。顺便说一句，关于为什么加载程序版本不起作用的任何想法？再次感谢
嗨。如果您可以创建一个 JSFiddle，我很乐意帮助您找出问题所在。
检查this。我不知道为什么它不起作用。我使用jQuery 1.11.3 而不是1.11.0。如果我用http://localhost:3000/geoserver/mymap/wfs 替换http://demo.opengeo.org/geoserver/wfs，即使我没有看到任何错误，它也不起作用。 wfs GET 的状态为 200 OK。我不明白，对我来说看起来不错，我可以发现错误。任何提示都会很棒。谢谢
我的代码基于this。我也使用 Openlayers 3.9.0
查询工作正常，但是几何图形的读取似乎有问题。见更新示例：jsfiddle.net/cn8jsdmz/3 这将与此线程无关，因此如果您无法解决问题，我建议您开始一个新的。

【解决方案2】：

这会更好用

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, resolution, projection){
                $.ajax({
                url: url,
                type:'GET',
                dataType: 'jsonp'
                }).done(function(response) {

                    var features = vectorSource.readFeatures(response, {
                        featureProjection: projection
                    });

                    vectorSource.addFeatures(features);
                });
           },
          strategy: new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20}))
});

【讨论】：

【解决方案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

【讨论】：