openlayers 3中的矢量图层加载问题

时间:2015-02-02 08:36:02

标签: openlayers-3

我在ol3中有关于矢量加载的问题。

我正在使用无法处理js回调的地理服务器

为了加载我的功能,我必须在加载器的ajax 完成功能中添加它们:

var buildLoader = function(vectorSource, $vector) {
    return function(extent, resolution, projection) {
        extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:3857", "EPSG:4326"));
        var url = 'https://myurl/' + $vector.attr("url") +
            '?service=WFS' +
            '&version=' + $vector.attr("version") +
            '&request=GetFeature' +
            '&typename=' + $vector.attr("typename") +
            '&srs=' + $vector.attr("projection") +
            '&bbox=' + extent +
            '&outputFormat=json';
        $.ajax({
            url: url,
            dataType: 'json',
            xhrFields: {
              withCredentials: true
            }
        })
        .done(function(response) {
            vectorSource.addFeatures(vectorSource.readFeatures(response));
        });
    }
}

然后我构建了一个要在我的地图上添加的矢量数组。

    for (index=0; index < vectors.length; index++) {
        var $vector = $(vectors[index]);
        var vectorSource = new ol.source.ServerVector({
            format: new ol.format.GeoJSON(),
            loader: buildLoader(vectorSource, $vector),
            projection: 'EPSG:3857'
        });

        // ... //
        datas[index] = new ol.layer.Vector({
            source: vectorSource,
            visible: 'false',
            style: iconStyle
        });
    }

这里的问题是加载器使用的vectorSource总是[index - 1]

我通过在实例化后定义加载器函数找到了一个Hack:

        var vectorSource = new ol.source.ServerVector({
            format: new ol.format.GeoJSON(),
            projection: 'EPSG:3857'
        });
        vectorSource.loader_ = buildLoader(vectorSource, $vector);

我发现这个很难看,但是没有可用于ServerVector类型的setLoader()。你知道是否有一个涉及使用另一个地理服务器的解决方案?

1 个答案:

答案 0 :(得分:0)

我在buildLoader函数中保存了对VectorSource对象实例的引用(而不是参数)。

vectorSource = this;

然后我在done()函数中使用该引用:

vectorSource.addFeatures(vectorSource.readFeatures(response));

完整来源:

var buildLoader = function($vector) {
    return function(extent, resolution, projection) {
        vectorSource = this;
        extent = ol.extent.applyTransform(extent, ol.proj.getTransform("EPSG:3857", "EPSG:4326"));
        var url = 'https://myurl/' + $vector.attr("url") +
            '?service=WFS' +
            '&version=' + $vector.attr("version") +
            '&request=GetFeature' +
            '&typename=' + $vector.attr("typename") +
            '&srs=' + $vector.attr("projection") +
            '&bbox=' + extent +
            '&outputFormat=json';
        $.ajax({
            url: url,
            dataType: 'json',
            xhrFields: {
              withCredentials: true
            }
        })
        .done(function(response) {
            vectorSource.addFeatures(vectorSource.readFeatures(response));
        });
    }
}