地图未达到最小缩放级别打开图层6

Question

我正在使用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, 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为我工作。感谢@Mike的帮助。