Cambia il centro di visualizzazione di OpenLayers 3

Sto usando OpenLayers 3 per interagire con alcune mappe. Dichiaro innanzitutto la mia mappa:

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

Ho un evento che attiva un'azione, per cambiare il centro di visualizzazione della mia mappa. In questo modo (le mie coordinate sono in 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 la funzione viene eseguita, ottengo questo dalla console di Explorer:

Lat: 9.0412851667 Long: -79.5658145000

Ma le mappe vanno a [0,0], qualcuno sa perché questo accada?

— Guillelon
fonte

Risposte:

In ol.proj.transform devi specificare fromProjection prima di toProjection, quindi dovrebbe funzionare.

Come spiega Michael Gentry nella sua risposta, un altro problema è che devi prima specificare la longitudine (ovest-est quindi x) e poi la latitudine (sud-nord quindi y).

E un modo migliore per impostare il centro è ottenere la vista corrente e impostare il centro lì invece di crearne sempre uno nuovo.

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 ho capito grazie. Ancora una cosa, se la cambio in questo modo ricevo un nuovo errore

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

. E penso che sia perché le mie coordinate sono troppo lunghe. Se lo cambio [131.044922, -25.363882]perché funziona bene. Quindi le mie coordinate sono troppo lunghe ??

— Guillelon,

quello non dovrebbe essere il problema. con quali coordinate si è verificato l'errore? quelli che hai menzionato sopra?

— Simon Zyx,

sì, quello lì

— Guillelon,

Ho provato queste coordinate con una mappa MapQuest e ha funzionato. Una longitudine di -79 è ancora entro i limiti di EPSG: 4326 (entro +/- 90 gradi) e EPSG: 3857 (entro +/- 85 gradi).

— Simon Zyx,

è un typeerror che si trova all'interno del renderer e un rangerror

— Simon Zyx,

Ho un nuovo account di scambio di stack e non ho una reputazione abbastanza alta da commentare "Uncaught TypeError: impossibile eseguire 'putImageData' su 'CanvasRenderingContext2D': il parametro float 3 non è finito." errore. Ciò si verifica perché al retro sono presenti gli input lat e long.

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

dovrebbe essere:

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

nel caso qualcun altro abbia questo problema.

— Michael Gentry
fonte

si hai ragione - aggiornerò la mia risposta di conseguenza.

— Simon Zyx,

Solo per browser:

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

Per l'uso di 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