openlayers 3范围，保持屏幕上的地图？

Question

我正在尝试构建自定义地图，但我遇到了两个问题。首先是我在地图上显示了鼠标位置，但是坐标一直在地图之外（例如，地图是5167x4115，但是当鼠标位于它周围的黑色空间时它仍然显示坐标）。

另外，有没有办法让地图保持在屏幕上？我似乎可以继续淘汰和平移到黑暗的海洋中。我可以将地图本身限制在屏幕的范围内吗？

这是我到目前为止的地图代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="pad-section" id="about">
  <div class="container">
    <h1 class="text-center">COMPANIES</h1>
    <div class="row" style="margin: 150px 0 100px 0;">
      <div class="text-center col-xs-4 col-lg-4">
        <div class="ih-item square effect6 from_top_and_bottom">
          <a href="#">
            <div class="img">
              Image with hovering effect
            </div>
            <div class="info">
              <h3>Title</h3>
              <p>Description</p>
            </div>
          </a>
        </div>
      </div>
      <div class="text-center col-xs-4 col-lg-4">
        <div class="ih-item square effect6 from_top_and_bottom">
          <a href="#">
            <div class="img">
              Image with hovering effect
            </div>
            <div class="info">
              <h3>Title</h3>
              <p>Description</p>
            </div>
          </a>
        </div>
      </div>
      <div class="text-center col-xs-4 col-lg-4">
        <div class="ih-item square effect6 from_top_and_bottom">
          <a href="#">
            <div class="img">
              Image with hovering effect
            </div>
            <div class="info">
              <h3>Title</h3>
              <p>Description</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>