OpenLayers 3: projection for Yandex.Maps

Question

I need 3 layers: OSM, Google and Yandex. My view, OSM and Google layer in EPSG:3857 projection, but Yandex layer seems to be in EPSG:3395, so it was displayed not correctly. I've defined the new projection via proj4js and the layer has moved significantly, but it still doesn't match the other layers.

My code is:

proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');

map = new ol.Map({
  target: 'olmap',
  layers: [
    new ol.layer.Tile({
      title: 'Yandex',
      source: new ol.source.XYZ({
        url: '...',
        projection: 'EPSG:3395'
      })
    }),
    new ol.layer.Tile({
      title: 'Google',
      source: new ol.source.XYZ({
        url: '...'
      })
    }),
    new ol.layer.Tile({
      title: 'OSM',
      source: new ol.source.XYZ({
        url: '...'
      })
    })
  ],
  view: new ol.View({
    projection: 'EPSG:3857',
    extent: ol.proj.transformExtent([-180, -80, 180, 80], 'EPSG:4326', 'EPSG:3857')
  })
});

The definition of EPSG:3395 I took from here: https://epsg.io/3395 .

OSM layer:

Yandex.Maps layer:

Where is my mistake?

Answer 1

To configure the Yandex tile layer correctly, you need to customize the tile grid to match the extent Yandex uses for the world, which is [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]. So your Yandex tile layer configuration would look like this:

new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'http://vec0{1-4}.maps.yandex.net/tiles?l=map&x={x}&y={y}&z={z}',
    projection: 'EPSG:3395',
    tileGrid: ol.tilegrid.createXYZ({
      extent: [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
    })
  })
})

If you want to use EPSG:3395 as view projection, it makes sense to configure the projection extent for EPSG:3395:

proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
ol.proj.get('EPSG:3395').setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]);

If you have done so, you can omit the tileGrid option for the Yandex source.