Changer le centre de vue d'OpenLayers 3

J'utilise OpenLayers 3 pour interagir avec certaines cartes. Je déclare d'abord ma carte:

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

J'ai un événement qui déclenche une action, pour changer le centre de vue de ma carte. De cette façon, (mes coordonnées sont au EPSG:4326format):

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

Lorsque la fonction s'exécute, je l'obtiens sur la console de l'explorateur:

Lat: 9.0412851667 Long: -79.5658145000

Mais les cartes vont à [0,0], est-ce que quelqu'un sait pourquoi cela se produit?

— Guillelon
source

Réponses:

Dans ol.proj.transform, vous devez spécifier la fromProjection avant la toProjection, puis cela devrait fonctionner.

Comme l'explique Michael Gentry dans sa réponse, un autre problème est que vous devez d'abord spécifier la longitude (ouest-est donc x) puis la latitude (sud-nord donc y).

Et une meilleure façon de définir le centre consiste à obtenir la vue actuelle et à y définir le centre au lieu d'en créer toujours une nouvelle.

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
source

Ok je l'ai eu merci. Encore une chose, si je le change de cette façon, j'obtiens une nouvelle erreur

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

. Et je pense que c'est parce que mes coordonnées sont trop longues. Si je le change car [131.044922, -25.363882]ça marche bien. Mes coordonnées sont-elles trop longues ??

— Guillelon

cela ne devrait pas être le problème. avec quelles coordonnées l'erreur s'est-elle produite? celles que vous avez mentionnées ci-dessus?

— Simon Zyx

oui celui là

— Guillelon

J'ai essayé ces coordonnées avec une carte MapQuest et cela a fonctionné. Une longitude de -79 est toujours dans les limites d'EPSG: 4326 (dans +/- 90 degrés) et d'EPSG: 3857 (dans +/- 85 degrés).

— Simon Zyx

c'est une erreur de type se produisant à l'intérieur du moteur de rendu et une erreur de rang

— Simon Zyx

J'ai un nouveau compte d'échange de pile et je n'ai pas une réputation suffisamment élevée pour commenter le "Uncaught TypeError: échec de l'exécution de" putImageData "sur" CanvasRenderingContext2D ": le paramètre flottant 3 n'est pas fini." Erreur. Cela se produit car vous avez les entrées lat et long en arrière.

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

devrait être:

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

au cas où quelqu'un d'autre aurait ce problème.

— Michael Gentry
source

oui vous avez raison - je mettrai à jour ma réponse en conséquence.

— Simon Zyx

Pour une utilisation uniquement par navigateur:

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

Pour une utilisation 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
source