Implement readProjection on ol.format.WFS and add WFS JSONP example

examples/vector-wfs.js

@@ -0,0 +1,60 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.loadingstrategy');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.ServerVector');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+goog.require('ol.tilegrid.XYZ');
+
+var loadFeatures = function(response) {
+  vectorSource.addFeatures(vectorSource.readFeatures(response));
+};
+
+var vectorSource = new ol.source.ServerVector({
+  format: new ol.format.GeoJSON(),
+  loader: function(extent, resolution, projection) {
+    var url = 'http://demo.opengeo.org/geoserver/wfs?service=WFS&' +
+        'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
+        'outputFormat=text/javascript&format_options=callback:loadFeatures' +
+        '&srsname=EPSG:3857&bbox=' + extent.join(',');
+    $.ajax({
+      url: url,
+      dataType: 'jsonp'
+    });
+  },
+  strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
+    maxZoom: 19
+  })),
+  projection: 'EPSG:3857'
+});
+
+var vector = new ol.layer.Vector({
+  source: vectorSource,
+  style: new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: 'rgba(0, 0, 255, 1.0)',
+      width: 2
+    })
+  })
+});
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.BingMaps({
+    imagerySet: 'Aerial',
+    key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+  })
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  target: document.getElementById('map'),
+  view: new ol.View2D({
+    center: [-8908887.277395891, 5381918.072437216],
+    maxZoom: 19,
+    zoom: 12
+  })
+});