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.
Your callback is
If you change
httpOutPuttoresponseand 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.