OL3 How to reproject vector layer on fly (ol 3.14)

Question

I have a map in OL 3.14 with a WMTS in a specific epsg. I add a WMS layer in an other projection and it's ok, OL reproject right. But with a vector Layer (geoJson, in the same projection as WMS), Openlayers don't display my feauture.

For my local projection, I use proj4.

My code :

var projectionL = ol.proj.get('EPSG:2154');
var projectionCC = ol.proj.get('EPSG:3946');

var ortho2013Extend= [1372000.0,5207000.0,1403020.0000000002 , 5238000.0];
//11 niveau de tuilage
var matrixIds = new Array(11);
//donc 11 niveaux resolution à gérer
var resolutions = new Array(11);

var size = ol.extent.getWidth(ortho2013Extend) / 302;
for (var z = 0; z < 11; ++z) {
  // generate resolutions and matrixIds arrays for this WMTS
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = z;
}
var ortho2013=new ol.layer.Tile({
  opacity: 0.7,
  extent:ortho2013Extend,
  source: new ol.source.WMTS({
    url: 'https://sigar.agglo-larochelle.fr/CeramikServer/rest/wmts/cdalr/ortho2013?',
    layer: 'ortho2013',
    matrixSet: projectionCC,
    format: 'image/jpeg',
    transparente:true,
    projection: projectionCC,
    tileGrid: new ol.tilegrid.WMTS({
      origin: ol.extent.getTopLeft(ortho2013Extend),
      resolutions: resolutions,
      matrixIds: matrixIds,
      tileSize:302
    }),
    style: 'default'
  })
})
var feuxSonoresLayer = new ol.layer.Vector({
   source: new ol.source.Vector({
        url: 'feux_sonores_cc46.geojson',
        format: new ol.format.GeoJSON(),
        projection:projectionL
    })
});
map = new ol.Map({
    layers:[ortho2013, pluLayer, wmsHotSpotWifi, feuxSonoresLayer],
    target: 'map',
    //aucun controle
    //controls:[],
    view: new ol.View({
        projection: projectionCC,
        center: [1377000,5227000],
        extent: ortho2013Extend,
        zoom:14
    })
});

I have found some examples but in old version (3.8) and it used ol.source.GeoJSON, but this source doesn't exist now.

How to do ?

Answer 1

You need to correct your vector layer definition (the solution has been tested).

In below definition, you use a projection option that does not exist in the current ol.source.Vector API.

var feuxSonoresLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'feux_sonores_cc46.geojson', format: new ol.format.GeoJSON(), projection:projectionL }) }); Replace it with:

var feuxSonoresLayer = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'feux_sonores_cc46.geojson', format: new ol.format.GeoJSON({ defaultDataProjection: projectionCC }) }) });

GeoJSON recommended data projection is EPSG 4326. OpenLayers 3 implicitly uses it. The simplest choice is to use GeoJSON with EPSG:4326 projection coordinates.

Otherwise, if you choose to keep using a local projection for your GeoJSON (deduced from your file name feux_sonores_cc46.geojson, CC46 = EPSG:3946), you need to specify it explicitly with option defaultDataProjection available within ol.format.GeoJSON

You can also replace projectionCC variable with 'EPSG:3946'. As long as the projection is already loaded, using 'EPSG:3946' instead will make an implicit call to ol.proj.get('EPSG:3946') behind the scene.