Openlayers 3 平移地图总是在左边

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

这在用户位于 "looking" 北方时效果很好，但当我将地图旋转一个角度时效果不佳。有没有快速平移地图的方法，无论角度如何，总是向左移动一定量？

Answer 1

您可以使用 ol.Map.html#getPixelFromCoordinate to convert the center to pixel coordinates, do your calculation and then convert back to real coordinates with 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);

  }

Openlayers 3 平移地图总是在左边

Openlayers 3 pan map always to the left

rotation

openlayers-3

pan