openlayers-5 - 为ol静态图像制作边界

Question

我正在使用 ol v5.3.0 查看静态图像。我想为ol div的大小绑定图像。当图像最小化超过 div 大小时，将不再最小化。我尝试将静态图像的投影属性与原始图像大小的范围一起使用，但这没有帮助。有什么选择吗？

Answer 1

基于此示例https://openlayers.org/en/v4.6.5/examples/static-image.html

不是在缩放 2 时立即打开，而是首先将范围调整为地图大小并获取生成的缩放级别（将是分数）并将其设置为最小缩放，则地图不能缩小到超出地图大小的范围图像（尽管可以在范围之外平移）。

  var extent = [0, 0, 1024, 968];
  var projection = new ol.proj.Projection({
    code: 'xkcd-image',
    units: 'pixels',
    extent: extent
  });

  var map = new ol.Map({
    layers: [
      new ol.layer.Image({
        source: new ol.source.ImageStatic({
          attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
          url: 'https://imgs.xkcd.com/comics/online_communities.png',
          projection: projection,
          imageExtent: extent
        })
      })
    ],
    target: 'map',
    view: new ol.View({
      projection: projection
    })
  });

  var view = map.getView();
  view.fit(extent, { constrainResolution: false });
  view.setMinZoom(view.getZoom());

  // set opening zoom level (zoom set by code must not be less than the minZoom)
  view.setZoom(Math.max(2, view.getMinZoom());

  var center = ol.extent.getCenter(extent);
  view.on(['change:center','change:resolution'], function() {
  // map.on('moveend', function() {        // alternative
      var viewCenter = view.getCenter();
      if ((viewCenter[0] != center[0] || viewCenter[1] != center[1]) && view.getZoom() == view.getMinZoom()) {
          view.setCenter(center);
      }
  });