Cambiar el centro de visualización de OpenLayers 3

14

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?

openlayers-2 coordinate-system coordinates epsg openlayers Guillelon
fuente

Respuestas:

26

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
9

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
0

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