为ol静态图像制作边界

Question

我正在使用 ol v5.3.0 查看静态图像。我想绑定图片为oldiv的大小。当图像最小化超过 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);
      }
  });

为ol静态图像制作边界

Make boundary for ol static image

openlayers-5