Openlayers 3 - 限制地图上可能的缩放级别答案

【问题标题】：Openlayers 3 - limit possible zoom levels on the mapOpenlayers 3 - 限制地图上可能的缩放级别
【发布时间】：2016-03-09 12:06:03
【问题描述】：

我需要将缩放级别保持在特定级别 (5-19) 之间，并且不允许用户进一步放大/缩小。我已经尝试设置视图的 minZoom/maxZoom 属性，以及 minResolution/maxResolution，但它似乎不起作用。

代码如下：

map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM( {crossOrigin: null} )
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: ({
            collapsible: false
        })
    }),
    view: new ol.View({
        center: [0, 0],
        zoom: 5,
        minZoom: 5,
        maxZoom: 19,
        minResolution: 4891.96981025128,
        maxResolution: 39135.75848201024,
        projection: new ol.proj.get("EPSG:900913")
    })
});

我已经尝试过仅使用 minZoom/maxZoom 的设置、minResolution/maxResolution 的设置或所有这些设置...什么也没发生，我仍然可以进一步放大。

编辑：在上面的代码中是“zoom: 5”，而不是“zoom: 2”。

【问题讨论】：

不要同时使用：maxZoom、minResolution，阅读docs。

标签： zooming openlayers-3

【解决方案1】：

view: new ol.View({
    center: [0, 0],
    zoom: 5,
    minZoom: 5,
    maxZoom: 19,
    minResolution: 4891.96981025128,
    maxResolution: 39135.75848201024,
    projection: new ol.proj.get("EPSG:900913")
})

将缩放参数更改为 5 或更多。它将解决您的问题。

【讨论】：

对不起，我改错了，但我查了一下，原来的代码是zoom: 5。还是不行。
在页面加载后在控制台中检查您的缩放级别，使用以下语法 map.getView().getZoom()
我查过了，上面写着 5。
现在缩小到可以的水平，然后在控制台中检查缩放值。您无需提及最小和最大分辨率参数。
查看这个例子openlayers.org/en/v3.2.1/examples/zoom-constrained.html

【解决方案2】：

尝试在地图元素的 ol.view 中添加 maxResolution 属性。

`  view: new ol.View({
            center: ol.proj.transform([20.6031834, 48.6325657], 'EPSG:4326', 'EPSG:3857'),
            zoom: 11,
            maxResolution: 4000

        })`

简单的地图示例

 var map = new ol.Map({
        layers: [map, satMap],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: ({
                collapsible: false
            })
        }),
        view: new ol.View({
            center: ol.proj.transform([20.6031834, 48.6325657], 'EPSG:4326', 'EPSG:3857'),
            zoom: 11,
            maxResolution: 4000

        })
    });

【讨论】：