3的OpenLayers泛地图总是向左

Question

我正在开发一个应用程序，我从服务器获取用户的位置和我显示在地图上。

我还设置有角度因此可以显示在哪个方向用户正在看。

还有开了一些详细信息，侧面板的可能性。在这种情况下，我有向左移动地图中心，我喜欢这样。

var center = map.getView().getCenter();

var pan = ol.animation.pan({
    duration: 500,
    source: (center)
});

if (isSidePanelVisible) {
    center[0] += 1000;
} else {
    center[0] -= 1000;
}

map.beforeRender(pan);
map.getView().setCenter(center);

这个伟大的工程在用户“看”北，但不是我的角度旋转地图。是否有一个快速的方法来平移始终角度一定量的regardles留下的地图吗？

Answer 1

你可以使用ol.Map.html#getPixelFromCoordinate转换的中心像素坐标，做你的计算，然后转换回用ol.Map.html#getCoordinateFromPixel真实坐标：

var view = map.getView();
var center = view.getCenter();
var centerInPx = map.getPixelFromCoordinate(center);
var newCenterInPx = [centerInPx[0] - 100, centerInPx[1]];
var newCenter = map.getCoordinateFromPixel(newCenterInPx);
view.setCenter(newCenter);

http://jsfiddle.net/6mh110xv/1/

Answer 2

要向左平移，右，下，上，你可以使用下面的代码：

panMap(direction: string) {
    let newCenterInPx;
    let center = map.getView().getCenter();
    let centerInPx = map.getPixelFromCoordinate(center);

    switch (direction) {
      case 'left': newCenterInPx = [centerInPx[0] - 100, centerInPx[1]]; break;
      case 'right': newCenterInPx = [centerInPx[0] + 100, centerInPx[1]]; break;
      case 'top': newCenterInPx = [centerInPx[0], centerInPx[1] - 100]; break;
      case 'bottom': newCenterInPx = [centerInPx[0], centerInPx[1] + 100]; break;
    }
    var newCenter = map.getCoordinateFromPixel(newCenterInPx);
    map.getView().setCenter(newCenter);

  }