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

设置静态图像的边界

1 个答案: