ol3 support #81

Activity

1. Jenselme commented on Feb 10, 2017

   

   Jenselme

   on Feb 10, 2017

   More actions

   Even if this question is over a year old, I am posting an answer for future reference (I wandered the same thing this week).

   You can use it with OL3 with the code below. Just note that the updates of features won't work. It seems that OL3 only supports WFS-T 1.1.0 but TinyOWS only supports 1.0.0 (creation works though).

   var formatWFS = new ol.format.WFS({
       gmlFormat: new ol.format.GML2({
           featureNS: 'http://www.tinyows.org/',
           featureType: [LAYER_NAME],
           srsName: EPSG,
           featurePrefix: 'test',
       }),
   });
   
   var formatGML = new ol.format.GML2({
       featureNS: 'http://www.tinyows.org/',
       featureType: [LAYER_NAME],
       srsName: EPSG,
       featurePrefix: 'test',
   });
   
   var xs = new XMLSerializer();
   
   var sourceWFS = new ol.source.Vector({
       loader: function (extent) {
           $.ajax(WFS_SERVER, {
               type: 'GET',
               data: {
                   service: 'WFS',
                   version: '1.0.0',
                   request: 'GetFeature',
                   typename: LAYER_NAME,
                   srsname: EPSG,
                   bbox: `${extent.join(',')},${EPSG}`,
               }
           }).done(function (response) {
               console.log(response);
               console.log(formatWFS.readFeatures(response))
               sourceWFS.addFeatures(formatWFS.readFeatures(response));
           });
       },
       strategy: ol.loadingstrategy.bbox,
       projection: EPSG,
   });
   
   var layerWFS = new ol.layer.Vector({
       source: sourceWFS
   });
   
   var interaction;
   
   var interactionSelectPointerMove = new ol.interaction.Select({
       condition: ol.events.condition.pointerMove
   });
   
   var interactionSelect = new ol.interaction.Select({
       style: new ol.style.Style({
           stroke: new ol.style.Stroke({
               color: '#FF2828'
           })
       })
   });
   
   var interactionSnap = new ol.interaction.Snap({
       source: layerWFS.getSource()
   });
   
   var swissProjection = new ol.proj.Projection({
       code: 'EPSG:2056',
       // The extent is used to determine zoom level 0. Recommended values for a
       // projection's validity extent can be found at https://epsg.io/.
       extent: [2485869.5728, 1076443.1884, 2837076.5648, 1299941.7864],
       units: 'm'
   });
   ol.proj.addProjection(swissProjection);
   
   var map = new ol.Map({
       target: 'map',
       controls: [],
       interactions: [
           interactionSelectPointerMove,
           new ol.interaction.MouseWheelZoom(),
           new ol.interaction.DragPan()
       ],
       layers: [
           new ol.layer.Tile({
               source: new ol.source.OSM({
                   url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
                   opaque: false,
                   attributions: []
               })
           }),
           layerWFS
       ],
       view: new ol.View({
           center: [2647793.7, 1216394.1],
           zoom: 0,
           projection: EPSG,
           extent: [2485869.5728, 1076443.1884, 2837076.5648, 1299941.7864],
       })
   });

   If you want to use WFS 1.1.0, you will have to change ol.format.GML2 into ol.format.GML:

   var formatWFS = new ol.format.WFS();
   
   var formatGML = new ol.format.GML({
       featureNS: 'http://www.tinyows.org/',
       featureType: [LAYER_NAME],
       srsName: EPSG,
       featurePrefix: 'test',
   });
   
   var xs = new XMLSerializer();
   
   var sourceWFS = new ol.source.Vector({
       loader: function (extent) {
           $.ajax(WFS_SERVER, {
               type: 'GET',
               data: {
                   service: 'WFS',
                   version: '1.0.0',
                   request: 'GetFeature',
                   typename: LAYER_NAME,
                   srsname: EPSG,
                   bbox: `${extent.join(',')},${EPSG}`,
               }
           }).done(function (response) {
               console.log(response);
               console.log(formatWFS.readFeatures(response))
               sourceWFS.addFeatures(formatWFS.readFeatures(response));
           });
       },
       strategy: ol.loadingstrategy.bbox,
       projection: EPSG,
   });
   
   var layerWFS = new ol.layer.Vector({
       source: sourceWFS
   });
   
   var swissProjection = new ol.proj.Projection({
       code: 'EPSG:2056',
       // The extent is used to determine zoom level 0. Recommended values for a
       // projection's validity extent can be found at https://epsg.io/.
       extent: [2485869.5728, 1076443.1884, 2837076.5648, 1299941.7864],
       units: 'm'
   });
   ol.proj.addProjection(swissProjection);
   
   var map = new ol.Map({
       target: 'map',
       controls: [],
       interactions: [
           interactionSelectPointerMove,
           new ol.interaction.MouseWheelZoom(),
           new ol.interaction.DragPan()
       ],
       layers: [
           new ol.layer.Tile({
               source: new ol.source.OSM({
                   url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
                   opaque: false,
                   attributions: []
               })
           }),
           layerWFS
       ],
       view: new ol.View({
           center: [2647793.7, 1216394.1],
           zoom: 0,
           projection: EPSG,
           extent: [2485869.5728, 1076443.1884, 2837076.5648, 1299941.7864],
       })
   });