Adding in multiple layers in OpenLayers 3

[المشرف العام]

I am trying to add in the following two layers into my OpenLayers 3 map. The issue i'm having is that whichever one is written in last is the only one that is showing. I imagine there is a way to combine some of this?

First Layer:

var probableLoader = function(extent, resolution, projection) { var url = 'http://PCNAME:8080/geoserver/WORKSPACENAME/ows?service=WFS&' + 'version=1.0.0&request=GetFeature&typename=LAYER_probable&' + 'outputFormat=text/javascript&format_options=callback:loadFeatures' + '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857'; $.ajax({ url: url, dataType: 'jsonp' }); }; var loadFeatures = function(response) { var features = probableSource.readFeatures(response); probableSource.addFeatures(features); }; var probableSource = new ol.source.ServerVector({ format: new ol.format.GeoJSON(), loader: probableLoader, strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({ maxZoom: 19 })), }); var probable = new ol.layer.Vector({ source: probableSource, style: probableStyle, name: 'Probable' }); Second Layer:

var committedLoader = function(extent, resolution, projection) { var url = 'http://PCNAME:8080/geoserver/WORKSPACENAME/ows?service=WFS&' + 'version=1.0.0&request=GetFeature&typename=LAYER_committed&' + 'outputFormat=text/javascript&format_options=callback:loadFeatures' + '&srsname=EPSG:3857&bbox=' + extent.join(',') + ',EPSG:3857'; $.ajax({ url: url, dataType: 'jsonp' }); }; var loadFeatures = function(response) { var features = committedSource.readFeatures(response); committedSource.addFeatures(features); }; var committedSource = new ol.source.ServerVector({ format: new ol.format.GeoJSON(), loader: committedLoader, strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({ maxZoom: 19 })), }); var committed = new ol.layer.Vector({ source: committedSource, style: committedStyle, name: 'Committed' }); These are then combined into a map:

var group = new ol.layer.Group({ layers: [probable, committed], name: 'group' }); var center = ol.proj.transform([-2.547855, 54.00366], 'EPSG:4326', 'EPSG:3857'); var view = new ol.View({ center: center, zoom: 5 }); var map = new ol.Map({ target: 'map', layers: [background, group, vector], view: view });

أكثر...