Alterar o centro de exibição do OpenLayers 3

Estou usando o OpenLayers 3 para interagir com alguns mapas. Primeiro declaro meu 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
            })
        });

Eu tenho um evento que aciona uma ação, para alterar o centro de exibição do meu mapa. Dessa forma, (minhas coordenadas estão em 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
     }));
}

Quando a função é executada, recebo isso no console do explorer:

Lat: 9.0412851667 Long: -79.5658145000

Mas os mapas seguem [0,0], alguém sabe por que isso acontece?

— Guillelon
fonte

Respostas:

No ol.proj.transform, você precisa especificar o fromProjection antes do toProjection, e ele deve funcionar.

Como Michael Gentry explica em sua resposta, outro problema é que você deve especificar primeiro a longitude (oeste-leste, portanto, x) e depois a latitude (sul-norte, portanto, y).

E uma maneira melhor de definir o centro é obter a visualização atual e defini-lo, em vez de sempre criar uma nova.

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
fonte

Ok, entendi obrigado. Mais uma coisa, se eu mudar dessa maneira, estou recebendo um novo erro

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

. E acho que é porque minhas coordenadas são muito longas. Se eu mudar para [131.044922, -25.363882]isso funciona ok. Então minhas coordenadas são longas demais?

— Guillelon 5/09/14

esse não deve ser o problema. com que coordenadas ocorreu o erro? os que você mencionou acima?

— Simon Zyx

sim aquele lá

— Guillelon

Tentei essas coordenadas com um mapa MapQuest e funcionou. Uma longitude de -79 ainda está dentro dos limites de EPSG: 4326 (dentro de +/- 90 graus) e EPSG: 3857 (dentro de +/- 85 graus).

— Simon Zyx 5/09

seu interior um TypeError ocorrendo do processador e um rangerror

— Simon Zyx

Eu tenho uma nova conta de troca de pilhas e não tenho uma reputação alta o suficiente para comentar sobre o "Tipo não detectado: Erro ao executar 'putImageData' em 'CanvasRenderingContext2D': o parâmetro flutuante 3 não é finito". erro. Isso ocorre porque você tem as entradas lat e long para trás.

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

deveria estar:

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

caso alguém mais tenha esse problema.

— Michael Gentry
fonte

sim, você está certo - atualizarei minha resposta de acordo.

— Simon Zyx

Para uso somente no 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 do 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
fonte