[GIS] OpenLayers 3 display WFS EPSG:4326 on EPSG:3857 map

coordinate systemepsgopenlayerswfs

Is it possible in OpenLayers 3 to project an EPSG:4326 WFS vector layer on to say a MapQuest EPSG:3857 map?

I've tried the following code (modifying this example OpenLayers 3 WFS example, but the EPSG:4326 layer coordinates get interpreted as EPSG:3857 and so I get a tiny drawing situated around 0 long, 0 lat.

<body>
<div id="map" class="map"></div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
<script type="text/javascript">
// format used to parse WFS GetFeature responses
var geojsonFormat = new ol.format.GeoJSON();
var vectorSource = new ol.source.Vector({
  loader: function(extent, resolution, projection) {
    var url = '/geoserver/wfs?' +
      'service=WFS' +
      '&version=1.1.0' + 
      '&request=GetFeature' + 
      '&typename=test:plats' +
      '&outputFormat=application/json' + 
      '&srsname=EPSG:3857';
    // use jsonp: false to prevent jQuery from adding the "callback"
    // parameter to the URL
    $.ajax({
      url: url , 
     /*dataType: 'jsonp', 
      jsonp: false*/
    })
    .done(function(response) {
      loadFeatures(response);
    });
  },
  strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
    maxZoom: 19
  }))
});

/**
 * JSONP WFS callback function.
 * @param {Object} response The response object.
 */
window.loadFeatures = function(response) {
  vectorSource.addFeatures(geojsonFormat.readFeatures(response)); 
};

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 map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'osm'})
      }),
      vector
    ],
    view: new ol.View({
      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
      zoom: 4
    })
  });

</script>
</body>

There's obviously a reprojection needed somewhere, but where?

Best Answer

pass the srsname to your ajax request. Consider the following

sourceVector = new ol.source.Vector({
loader: function (extent) {
    //place here any actions on start loading layer
    cosnole.log("start loading.....");
    $.ajax('http://demo.opengeo.org/geoserver/wfs', {
        type: 'GET',
        data: {
            service: 'WFS',
            version: '1.1.0',
            request: 'GetFeature',
            typename: 'water_areas',
            srsname: 'EPSG:3857',
            bbox: extent.join(',') + ',EPSG:3857'
        }
    }).done(loadFeatures)
        .fail(function () {
        //place here any actions on fail loading layer
        alert("error loading vector layer");
    });
},
strategy: ol.loadingstrategy.bbox

});

this should let geoserver do the reprojection. End then to parse the response

function loadFeatures(response) {
var formatWFS = new ol.format.WFS(),
sourceVector.addFeatures(formatWFS.readFeatures(response));
}

check this fiddle. It is a working example.Though its purpose is different but should fit to you case

Related Question