WFS未在openlayers3中的地图中重叠

时间:2015-12-08 15:50:09

标签: jsonp openlayers-3 geoserver

我使用openlayers3从geoserver请求wfs。 wfs功能已成功加载,但我无法将其添加到地图中。我的代码看起来像:

var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults().extend(addControls()),
    layers: [
        sattelite, osm, bingLayer,
    ],
    view: view
});
createOverLayer('test', 1);

// Create the graticule component
var graticule = new ol.Graticule({
    //Style for lines
    strokeStyle: new ol.style.Stroke({
        color: 'rgba(0, 0, 0, 0.4)',
        width: 2
    })
});
graticule.setMap(map);

var sourceVector;
function createOverLayer(layerName, id) {
    console.log("super first");
    sourceVector = new ol.source.Vector({
        loader: function(extent, resolution, projection) {
            var url = 'http://192.168.0.101:8082/geoserver/test/ows';
            $.ajax(url,{
                    type: 'GET',
                    data: {
                        service: 'WFS',
                        version: '1.1.0',
                        request: 'GetFeature',
                        typename: 'test_Output',
                        srsname: 'EPSG:3857',
                        outputFormat: 'text/javascript',
                        bbox: extent.join(',') + ',EPSG:3857'
                    },
                    dataType: 'jsonp',
                    jsonpCallback: 'callback:getJson',
                    jsonp: 'format_options',
                    async: false,
            });
        },
        strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
            maxZoom: 19
        })),
    });
    console.log("here");
    /**
     * JSONP WFS callback function.
     * @param {Object} response The response object.
     */
    window.getJson = function(response) {
        geoJSON = new ol.format.GeoJSON();
        console.log("response");
        sourceVector.addFeatures(geoJSON.readFeatures(response));
    };
    console.log("here2");
    var vector = new ol.layer.Vector({
        source: sourceVector,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2
            })
        })
    });
    console.log("here3");
    map.addLayer(vector);
    console.log('here4');
}

控制台输出如下:
超级第一 这里
here2
here3
here4
响应
响应
响应
响应
响应
响应
响应
响应
响应
响应
响应
响应
响应

看起来map.addLayer(vector)在地理服务器响应之前执行了吗?我还期望一个response控制台,但有许多控制台。

我在这里缺少什么?

1 个答案:

答案 0 :(得分:0)

我将createOverLayer('test', 1);移到map

之上后,工作正常