proyecciones de openlayers 4

Question

No puedo entender la esencia del problema ... Hay una página web con openlayers 4, en ella como capas de base puedo elegir Bing, OSM, Yandex y otros:

        src = new ol.source.BingMaps({
        imagerySet: 'AerialWithLabels',//'AerialWithLabels',
        key: '---'
    });
    bases["bing"] = new ol.layer.Tile({
        name: 'bing',
        title: 'Bing Maps aerial',
        is_base_layer: true,
        visible: false,
        source: src
    });

    src = new ol.source.XYZ({
        url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png',
        visible: true
    });
    bases["tf"] = new ol.layer.Tile({
        name: 'tf',
        visible: false,
        source: src,
        is_base_layer: true
    });

    src = new ol.source.OSM();
    bases["osm"] = new ol.layer.Tile({
        name: 'osm',
        visible: false,
        source: src,
        is_base_layer: true
    });

Con Yandex es más complicado:

        var yaex = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244];
    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(yaex);

    bases["yandex"] = 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: yaex
            })
        }),
        visible: false,
        is_base_layer: true
    });

Creo un mapa como de costumbre:

        var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([mousePositionControl]),
        target: 'map',
        layers: [],
        view: new ol.View({
            projection: 'EPSG:3857'
        })
    });

Todo funciona bien, puedo cambiar las capas base, todo es correcto. Ahora quiero cambiar la proyección de la vista a 4326:

view: new ol.View({
            projection: 'EPSG:4326'
        })

Todas las capas base se muestran correctamente, pero Yandex no se muestra. Chrome dice:

proj4-src.js:1836 Uncaught TypeError: Cannot read property 'x' of null
at transformer (proj4-src.js:1836)
at forward (proj4-src.js:1875)
at ol-debug.js:5515
at ol.reproj.Triangulation.transformInv_ (ol-debug.js:67660)
at new ol.reproj.Triangulation (ol-debug.js:67720)
at new ol.reproj.Tile (ol-debug.js:70840)
at ol.source.XYZ.ol.source.TileImage.getTile (ol-debug.js:72003)
at ol.renderer.canvas.TileLayer.prepareFrame (ol-debug.js:69282)
at ol.renderer.canvas.Map.renderFrame (ol-debug.js:23128)
at ol.Map.renderFrame_ (ol-debug.js:31812)

Mira más:

   function transformer(from, to, coords) {
 var transformedArray;
 if (Array.isArray(coords)) {
   transformedArray = transform(from, to, coords);
   if (coords.length === 3) {
     return [transformedArray.x, transformedArray.y, transformedArray.z];
   }
   else {
     return [transformedArray.x, transformedArray.y];// <--- ERROR HERE
   }
 }
 else {
   return transform(from, to, coords);
 }

}

transformedArray es null. null es igual porque transform() se llama para el punto [0, -90], y Yandex tiene la extensión [-180,-85,180,85], es decir, punto fuera de la extensión de Yandex. Pensé que por esto, pero miré en Bing y también tenían la misma extensión [-180,-85,180,85] que en Yandex. Si le doy a Yandex una proyección de 3857, entonces todo empieza a mostrarse, pero el problema es que Yandex tiene entonces un desplazamiento. En general, no entiendo por qué sucede esto.

Answer 1

He intentado utilizar la capa de yandex con EPSG:4326 adjunta en la vista y funciona como se espera. Así que parece que la reproyección de azulejos en el cliente de 3395 a 4326 funciona bien.

Este es el código que he utilizado:

var yaex = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244];
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(yaex);

var layer = 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: yaex
            })
        }),
        visible: true,
        is_base_layer: true
    });

var map = new ol.Map({
  layers: [layer],
  target: 'map',
  view: new ol.View({
    projection: 'EPSG:4326',
     center: [0, 0],
    zoom: 4
  })
});

Y aquí hay un fiddle para ver cómo funciona. Tal vez usted está usando una versión incorrecta de proj4js. Revisa los "Recursos Externos" de mi fiddle para ver la librería proj4js que estoy usando.