loading vector layer in OL3 with and without ajax

Question

I am trying to use OL3 for loading a vector layer from a geoserver using the following JavaScript code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" />
<link rel="stylesheet" href="ol3-layerswitcher-master/src/ol3-layerswitcher.css" />
</head>
<body>
<div id="map" class='map'></div>
<script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script>
<script src="ol3-layerswitcher-master/src/ol3-layerswitcher.js"></script>
<script>
var geojasonFormat = new ol.format.GeoJSON();

var vectorSource = new ol.source.Vector({
    loader: function(extent, resolution, projection) {
        var url = 'http://bart.nateko.lu.se:8080/geoserver/wfs?&service=wfs&version=1.1.0&request=GetFeature&typeName=Ehsan:nyc_roads&outputFormat=application/json&maxFeatures=100&format_options=callback:loadFeatures';
        // use jsonp: false to prevent jQuery from adding the "callback"
        // parameter to the URL
        $.ajax({url:url,dataType:'jsonp',jsonp:true});
    },
    strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
    maxZoom: 19
    }))
});

window.loadFeatures = function(httpOutPut){
    vectorSource.addFeatures(geojsonFormat.readFeatures(response))
    };  


var vectorLayer = new ol.layer.Vector({
                    title:'road layer',
                    source: vectorSource,
                    style: new ol.style.Style({
                        stroke: 'rgba(255,255, 255, 1.0)',
                        width: 2
                    })
                });

var vectorGroup = new ol.layer.Group({
    'title':'vector',
    layers:[vectorLayer]});


var map = new ol.Map({
    target: document.getElementById('map'),
    layers:[
        new ol.layer.Group({
            'title': 'Base maps',
            layers:[ 
                new ol.layer.Tile({
                title: 'base map',
                type: 'base',
                source: new ol.source.MapQuest({layer: 'sat'})
                })
            ],
        }),vectorGroup

    ],
    view: new ol.View({
        center: ol.proj.transform([-74, 40.74], 'EPSG:4326', 'EPSG:3857'),
        zoom: 15    })
});
/*var extent = vectorLayer.getSource().getExtent();
map.getView().fit(extent, map.getSize());*/

var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);

</script>
</body>
</html>

I tried to follow the openlayers WFS example using ajax for loading the features in the vector source, but it is not working.

Additionally, I am wondering if there is a simpler solution for loading a vector layer from a geoserver WFS, something without AJAX. the ol2 seems to be more straight forward.

Hi there. What Openlayers version are you using exactly? is it 3.9.0? — slevin, Oct 12 '15 at 14:18

score 1 · Answer 1 · answered Sep 06 '15 at 20:13

1

Your callback is

window.loadFeatures = function(httpOutPut){
    vectorSource.addFeatures(geojsonFormat.readFeatures(response))
    };

If you change httpOutPut to response and your response from the servers is correct, you should probably be ok.

You are not sending the extent/bbox to geoserver, so you might be getting features outside of the extent.

This is the current way to load WFS data in ol3. There has been a recent change to master, so OpenLayers 3.9.0 will contain a simplified way of using WFS and use a new WFS example.

answered Sep 06 '15 at 20:13

Alvin Lindstam

3,094
16
28

Hi. Which one of those examples are the official to get WFS from a Geoserver to OL? The code in the question or [this](http://openlayers.org/en/v3.9.0/examples/vector-wfs.html?q=wfs)? The OL example confuses me alot. Do you know any tutorials that explain what is what? Thanks – slevin Oct 12 '15 at 14:22
1

@slevin: The link you provide is to OpenLayers' official examples (version 3.9). The code in the question is heavily inspired by the official example as it was in OpenLayers 3.8 and below. So both are official examples, but from different releases. – Alvin Lindstam Oct 12 '15 at 15:05

loading vector layer in OL3 with and without ajax

1 Answers1