javascript - Openlayers 在更改事件时获取 map 坐标

Question

当用户与 map 交互时，我使用 map 事件来检查 map 的坐标。然后，我将这个新的 map 坐标传递给 cookie，以便用户下次访问 map 时它会记住该坐标。

我在检索正确的纬度和经度投影时遇到问题。我使用mapbox作为源。

这是初始坐标:

[55.378051, -3.43597299999999] = UK

然后我使用 map 更改事件来获取 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);

});

如果我将 map 移至德国，这就是我得到的坐标:[8.686417,50.057008999999994]，这似乎完全正确。

然后我再次加载页面， map View 位于南非海岸附近。这里发生了一些投影问题。

我的控制台上不断出现错误，并且我已多次尝试更改投影变换。

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

Answer 1

确保您将此 Cookie 坐标转换回 EPSG:3857，同时确保您处理的是数字而不是字符串 >，参见 parseFloat() :

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