javascript - OpenLayers 3 中的 Popover 覆盖不会超出视野

Question

在 OpenLayers 覆盖示例中:

http://openlayers.org/en/v3.11.2/examples/overlay.html

如果您在 map 顶部附近单击，大部分叠加层将被隐藏。是否有 CSS 技巧或 OpenLayers 设置(我不想使用 autoPan，它似乎对弹出窗口不起作用)，即使它超出 map View 也能显示整个弹出窗口？

这是说明问题的屏幕截图。

Answer 1

autoPan 确实适用于弹出窗口，请参阅此处:http://openlayers.org/en/v3.11.2/examples/popup.html

但是，我在使用 autoPan 时也遇到了一些麻烦，所以我这样做了 (Fiddle demo):

// move map if popop sticks out of map area:
var extent = map.getView().calculateExtent(map.getSize());
var center = map.getView().getCenter();
var pixelPosition = map.getPixelFromCoordinate([ coordinate[0], coordinate[1] ]);
var mapWidth = $("#map").width();
var mapHeight = $("#map").height();
var popoverHeight = $("#popup").height();
var popoverWidth = $("#popup").width();
var thresholdTop = popoverHeight+50;
var thresholdBottom = mapHeight;
var thresholdLeft = popoverWidth/2-80;
var thresholdRight = mapWidth-popoverWidth/2-130;
if(pixelPosition[0] < thresholdLeft || pixelPosition[0] > thresholdRight || pixelPosition[1]<thresholdTop || pixelPosition[1]>thresholdBottom) {
    if(pixelPosition[0] < thresholdLeft) {
        var newX = pixelPosition[0]+(thresholdLeft-pixelPosition[0]);
    } else if(pixelPosition[0] > thresholdRight) {
        var newX = pixelPosition[0]-(pixelPosition[0]-thresholdRight);
    } else {
        var newX = pixelPosition[0];
    }
    if(pixelPosition[1]<thresholdTop) {
        var newY = pixelPosition[1]+(thresholdTop-pixelPosition[1]);
    } else if(pixelPosition[1]>thresholdBottom) {
        var newY = pixelPosition[1]-(pixelPosition[1]-thresholdBottom);
    } else {
        var newY = pixelPosition[1];
    }
    newCoordinate = map.getCoordinateFromPixel([newX, newY]);   
    newCenter = [(center[0]-(newCoordinate[0]-coordinate[0])), (center[1]-(newCoordinate[1]-coordinate[1])) ]
    map.getView().setCenter(newCenter);
}