1

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?

3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.