openlayers 5：将地图中心移动一个像素值

Question

I have an openlayers 5 map generated by:

// create the map with the proper center
var map = new ol.Map(
    {
        view: new ol.View(
            {
                center: ol.proj.fromLonLat([center.long, center.lat]),
                zoom: zoom
            }
        ),
        layers: [
            new ol.layer.Tile(
                {
                    source: new ol.source.OSM()
                }
            )
        ],
        target: 'mapdiv',
    }
);

I want move the center of the map by [10, 10] pixels clicking on an element, and I'm trying with an event like:

document.getElementById('mover').onclick = function() {
  center = map.getView().getCenter();
  map.view.setCenter(center[0] + 10, center[1] + 10);
  return false;
};

but it doesn't work, it breaks the map.

What is the correct way to achieve the move?

Answer 1

As stated in the example documentation Advanced View Positioning it should be done by view.centerOn(coordinate, size, position); You can find detailed API in here CenterOn API

Answer 2

map.view will cause an error, it should be map.getView() You need to multiply pixels by resolution (which is meters per pixel) to convert a move distance from pixels to meters

var center = map.getView().getCenter();
var resolution = map.getView().getResolution();
map.getView().setCenter([center[0] + 10*resolution, center[1] + 10*resolution]);