使用边界框策略加载 Open layers 3 jsonp 矢量图层？

Posted 2023-03-25

【中文标题】使用边界框策略加载 Open layers 3 jsonp 矢量图层？

【英文标题】：Load Open layers 3 jsonp vector layer with bounding box strategy?

【发布时间】：2015-02-20 11:35:01

【问题描述】：

我在使用 OpenLayers3 和边界框策略将要素从地理服务器加载到矢量图层时遇到问题。我试图找到如何使用边界框策略加载多个图层，但没有成功。唯一的例子 我发现这是一层并使用全局函数，在我的情况下不适用（http://acanimal.github.io/thebookofopenlayers3/chapter03_08_loading_strategies.html）。 问题是加载响应的函数不是全局定义的——如果是这样，我必须为我想要加载的每一层创建这样的函数，对吧？这是请求功能的示例 url 地址：

http://192.168.1.10/geoserver/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=ubutrusty:places&outputFormat=text/javascript&format_options=callback:success&srsname=EPSG:32635&bbox=161473.81383919955,4698323.564696768,234672.52335922938,4767981.6354873795,EPSG:32635 

您可以看到 format_options 参数设置为 callback:success 我确定这是问题所在，但我正在努力设置正确的回调函数.我的javascript知识不是很好，所以这个问题对我来说并不容易。

这就是我尝试创建新矢量图层的方式：

var layer = 
    name: 'ubutrusty:places',
    title: 'Позиции',
    source: createVectorLayer(layer),
    type: 'operational',
    visible: true,
    style: new ol.style.Style(
        stroke: new ol.style.Stroke(
            color: '#800000',
            width: 2
        )
    )

我想添加到地图的每一层都会调用这个函数 - 它返回 ol.source.ServerVector 对象：

MyApp.prototype.createVectorLayer = function(layerData)
    var vectorSource = new ol.source.ServerVector(
        format: new ol.format.GeoJSON(),
        loader: function(extent, resolution, projection) 
            extent = ol.proj.transformExtent(extent, projection.getCode(), ol.proj.get(layerData.srcEPSG).getCode());
            var url = config.proxyUrl + layerData.url + '?service=WFS&' +
                'version=1.1.0&request=GetFeature&typename=' + layerData.name + '&' + 'outputFormat=text/javascript' +
                '&format_options=callback:success&srsname=' + layerData.srcEPSG + '&bbox=' + extent.join(',') + ',' + layerData.srcEPSG;
            $.ajax(
                url: url,
                dataType: 'jsonp',
                success: function(data) 
                    this.addFeatures(this.readFeatures(data));
                ,
                error: function (e) 
                    var wtf = e.status;
                
            );
        ,
        strategy: ol.loadingstrategy.bbox,
        projection: layerData.srcEPSG
    )

    return vectorSource;


MyApp.map.addLayer(new ol.layer.Vector(layer);

问题是，是否可以定义一个函数来从多个层加载功能，如果可以，我该怎么做？如果我没有指定回调函数，则使用默认的（对于geoserver，它是parseResponse），它也没有定义。 如果需要更多信息，我可以提供其他参数或代码示例。

谢谢

【参考方案1】：

在您的 URL 中，您已经定义了回调函数的名称。它是success，由'&format_options=callback:success&srsname=' 定义。如果您想将createVectorLayer 函数用于多个图层，您需要将其更改为'&format_options=callback:success.' + layerData.name.replace(':', '_') + '&srsName='。然后您可以在全局对象字面量success 中创建一个函数注册表，您只需定义一次：

window.success = ;

然后您可以将以下代码添加到您的 createVectorLayer 函数中，这将为您的每个层创建一个回调函数：

success[layerData.name.replace(':', '_')] = function(response) 
  vectorSource.addFeatures(vectorSource.readFeatures(response));
;

【讨论】：

对不起，我的回答迟了，我无法更早地测试您的解决方案。这很棒，它解决了我的问题。我创建了一个公共对象：success = ，并在其中为加载到地图的每个图层创建了一个函数。我更改了读取功能的功能，因为vectorSource 未定义：success[operationalLayers[j].name.replace(':', '_')] = function(res) var layer = app.getLayerBy('name', Object.getOwnPropertyNames(this)[0].replace('_', ':')); layer.getSource().addFeatures(layer.getSource().readFeatures(res)); 谢谢