如何解决地图不会达到最小缩放级别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的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。