地图不会达到最小缩放级别 openlayers6

Question

I'm showing an image that has different layers using openlayers. It has 9 zoom levels with 0 being the minimum and 8 being the highest. But when the map loads, it starts with zoom level 2 and it is not going below 2. I tried setting the zoom level below 2 by using view.setZoom() method, but it's not working. view.getMinZoom() is returning value as 0 which is correct.

The code is mentioned below:

HTML DIV:

<div id="map" class="map" width="100%" height="100%" style="position: absolute; top: 0; left: 0; bottom: 0; right: 0;"></div>

JS CODE:

let tileSize = [500, 500];
let zoomLevels = [0, 1, 2, 3, 4, 5, 6, 7, 8];
let resolutions = getResolutions(0.2496, zoomLevels);
let imageShape = getImageShape(0.2496, 500, 160, 500, 144);
let projection = getProjection(imageShapeIhc);
let view = getView(projection, resolutions, imageShape, 0);
let url = 'some_url';
let layer = getLayer(tileSize, projection, resolutions, url);
let slidemap = getMap(view, layer, 'map');
let maxZoom = zoomLevels.length - 1;

slidemap.addControl(
          new ol.control.ScaleLine({
              units: "metric",
              minWidth: 100, 
          })
      );

      slidemap.getView().fit(layer.getExtent());

function getResolutions(uperpixel, zoomLevels) {
          let resolutions = [];
          (zoomLevels).forEach((level, index) => {
              resolutions.push(uperpixel * Math.pow(2, parseInt(level)));
          });
          resolutions = resolutions.reverse();
          return resolutions;
      }

      function getImageShape(uperpixel, tile_width, x_max, tile_height, y_max) {
          let imageWidth, imageHeight;

          imageWidth = uperpixel * tile_width * x_max;
          imageHeight = uperpixel * tile_height * y_max;

          return [imageWidth, imageHeight];
      }

      function getProjection(imageShape) {
          let projection = new ol.proj.Projection({
              code: 'some_code',
              units: 'microns',
              extent: [0, 0, imageShape[0], imageShape[1]],
              metersPerUnit: 0.000001,
              global: true,
              getPointResolution: function getPointResolution(resolution, point) {
                                    return resolution;
                                  },
          });
          return projection;
      }

      function getView(projection, resolutions, imageShape, rotation) {

          let maxZoom = (resolutions.length - 1);
          let view = new ol.View({
              projection: projection,
              extent: projection.getExtent(),
              center: imageShape,
              zoom: 0,
              maxResolution: resolutions[0],
              maxZoom: maxZoom,
              rotation: ((rotation * Math.PI) / 180),
              constrainResolution: true,
          });

          return view;
      }

      function getLayer(tileSize, projection, resolutions, url) {

          let layer = new ol.layer.Tile({
              extent: projection.getExtent(),
              renderMode: "vector",
              source: new ol.source.TileImage({
                  tileGrid: new ol.tilegrid.TileGrid({
                      extent: projection.getExtent(),
                      origin: [0, projection.getExtent()[3]],
                      resolutions: resolutions,
                      tileSize: tileSize,
                  }),
                  projection: projection,
                  url: url,
                  wrapX: false,
                  crossOrigin: null
              }),
          });

          return layer;
      }

      function getMap(view, layer, target) {

          let slidemap = new ol.Map({
              controls: [],
              target: target,
              layers: [
                  layer,
              ],
              view: view,
              keyboardEventTarget: document,
              loadTilesWhileAnimating: true,
              loadTilesWhileInteracting: true
          });

          return slidemap;
      }

Answer 1

constrainOnlyCenter: true worked for me. Thanks @Mike for your help.