Openlayers3获取更改事件的地图坐标

Question

I use a map event to check the coordinates of the map when a user interacts with it. I then pass this new map coordinates to cookies so that next time the user accesses the map it remember the coordinates.

I'm having issues retrieving the correct latitude and longitude projection. I'm using mapbox for the source.

This is the initial coordinates:

[55.378051, -3.43597299999999] = UK

Then I use a map change event to grab the coordinates for the center of the map.

map.getView().on('change:center', function) {

   var coord = ol.proj.transform(map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326');   
   var lon = coord[1];
   var lat = coord[0];

   Cookies.set(_myLonCoord, lon);
   Cookies.set(_myLatCoord, lat);

});

If I move the map to Germany this is the coordinates that I get: [8.686417,50.057008999999994] which seem totally correct.

Then I load the page again, and the map view is off the coast in South Africa. Some projection issues are happening here.

I keep getting errors on my console and I have tried changing the projection transformation many times.

ol.js:249 Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': The provided double value is non-finite.

Answer 1

Make sure you're transforming this cookie coordinates back to EPSG:3857 , also make sure you're dealing with numbers instead of string , see parseFloat() :

// a helper function
function to3857(coord) {
  return ol.proj.transform(
    [parseFloat(coord[0]), parseFloat(coord[1])],
    'EPSG:4326', 'EPSG:3857'
  );
}