Cambiar el centro de vista de OpenLayers 3

Question

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 vista de mi mapa. De esta manera, (mis coordenadas están en EPSG:4326 %-%):

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?

Answer 1

En ol.proj.transform debe especificar el fromProjection antes del toProjection, entonces debería funcionar.

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

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

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);
}

Answer 2

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

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

debe ser:

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

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

Answer 3

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 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
    })
  });