WFS 未覆盖在 openlayers3 的地图中

Posted 2023-03-25

【中文标题】WFS 未覆盖在 openlayers3 的地图中

【英文标题】：WFS not overlayed in map in openlayers3

【发布时间】：2015-12-08 15:50:09

【问题描述】：

我正在使用 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');

控制台输出如下： 超级第一 这里 这里2 这里3 这里4 回应 回应 回应 回应 回应 回应 回应 回应 回应 回应 回应 回应 回复

看起来map.addLayer(vector) 是在geoserver 响应之前执行的？我还希望有一个response 控制台，但其中有很多。

我在这里错过了什么？

【问题讨论】：

GeoServer 是否返回任何功能？这可能是一个跨域问题吗？ firebug 显示发生了什么？

【参考方案1】：

在我将createOverLayer('test', 1); 移到map 上方后，它起作用了