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

问题描述

我正在使用openlayers显示具有不同图层的图像。它具有9个缩放级别，其中0最小，8最高。但是，当地图加载时，它从2级缩放开始，并且不会低于2级。我尝试使用view.setZoom（）方法将2级以下的缩放比例设置为水平，但此方法不起作用。 view.getMinZoom（）返回的值为0，这是正确的。

下面提到了代码：

HTML DIV：

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

JS代码：

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,144);
let projection = getProjection(imageShapeIhc);
let view = getView(projection,resolutions,imageShape,0);
let url = 'some_url';
let layer = getLayer(tileSize,projection,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,imageShape[0],imageShape[1]],metersPerUnit: 0.000001,global: true,getPointResolution: function getPointResolution(resolution,point) {
                                    return resolution;
                                  },});
          return projection;
      }

      function getView(projection,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,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,target) {

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

          return slidemap;
      }

解决方法

sent Text home light sun sunshine NaN car park home NaN home light NaN sun car park NaN 为我工作。感谢@Mike的帮助。