Блог

Я показываю изображение, которое имеет разные слои, используя openlayers. Он имеет 9 уровней масштабирования, где 0 является минимальным, а 8 — самым высоким. Но когда карта загружается, она начинается с уровня масштабирования 2 и не опускается ниже 2. Я попытался установить уровень масштабирования ниже 2 с помощью метода view.setZoom(), но он не работает. 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, 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;
      }

  

constrainOnlyCenter: true сработало для меня. Спасибо @Mike за вашу помощь.