Cambiar el centro de visualización de OpenLayers 3

Estoy usando OpenLayers 3 para interactuar con algunos mapas. Primero declaro mi mapa:

map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.OSM()
              })
                ],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

Tengo un evento que desencadena una acción, para cambiar el centro de visualización de mi mapa. De esta manera, (mis coordenadas están en EPSG:4326formato):

function CenterMap(lat, long) {
     console.log("Lat: " + lat + " Long: " + long);
     map.setView(new ol.View({
            center: ol.proj.transform([lat, long], 'EPSG:3857', 'EPSG:4326'),
            zoom: 5
     }));
}

Cuando se ejecuta la función, obtengo esto en la consola del explorador:

Lat: 9.0412851667 Long: -79.5658145000

Pero los mapas van a [0,0], ¿alguien sabe por qué sucede esto?

— Guillelon
fuente

Respuestas:

En ol.proj.transform necesita especificar fromProjection antes de toProjection, entonces debería funcionar.

Como explica Michael Gentry en su respuesta, otro problema es que primero debe especificar la longitud (oeste-este, entonces x) y luego la latitud (sur-norte, entonces y).

Y una mejor manera de establecer el centro es obtener la vista actual y establecer el centro allí en lugar de crear siempre una nueva.

function CenterMap(long, lat) {
    console.log("Long: " + long + " Lat: " + lat);
    map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));
    map.getView().setZoom(5);
}

— Simon Zyx
fuente

Ok, lo tengo, gracias. Una cosa más, si lo cambio de esa manera, obtengo un nuevo error

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': float parameter 3 is non-finite. ol.js:457 2Uncaught RangeError: Invalid array length

. Y creo que es porque mis coordenadas son demasiado largas. Si lo cambio porque [131.044922, -25.363882]funciona bien. ¿Entonces mis coordenadas son demasiado largas?

— Guillelon

ese no debería ser el problema. ¿Con qué coordenadas se produjo el error? los que mencionaste anteriormente?

— Simon Zyx

Sí, el que está allí

— Guillelon

Intenté estas coordenadas con un mapa MapQuest y funcionó. Una longitud de -79 todavía está dentro de los límites de EPSG: 4326 (dentro de +/- 90 grados) y EPSG: 3857 (dentro de +/- 85 grados).

— Simon Zyx

es un error tipográfico que ocurre dentro del renderizador y un error de guardabosques

— Simon Zyx

Tengo una nueva cuenta de intercambio de pila y no tengo una reputación lo suficientemente alta como para comentar sobre "Error de tipo no capturado: no se pudo ejecutar 'putImageData' en 'CanvasRenderingContext2D': el parámetro flotante 3 no es finito". error. Esto ocurre porque tiene las entradas lat y long al revés.

map.getView().setCenter(ol.proj.transform([lat, long], 'EPSG:4326', 'EPSG:3857'));

debiera ser:

map.getView().setCenter(ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857'));

en caso de que alguien más tenga este problema.

— Michael Gentry
fuente

sí, tienes razón, actualizaré mi respuesta en consecuencia.

— Simon Zyx

Para uso exclusivo del navegador:

<script src='https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js'></script>


  ol.proj.transform() 

  ol.proj.transform([long, lat], 'EPSG:4326', 'EPSG:3857');

Para uso de js-app

   // for projection
  import {transform} from 'ol/proj.js';

  // use this one : transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857')





   var map = new Map({
    layers: layers,
    target: 'map',
    view: new View({
      //center: [-118.246521, 34.049039],
        center: transform([-118.246521, 34.049039], 'EPSG:4326', 'EPSG:3857'),
      zoom: 16
    })
  });

— hoogw
fuente