4-设置地图的缩放级别

本博客合集是我的openlayers学习笔记，希望能帮助到刚开始接触openlayers的同学
@commnet 所用openlayers版本：v5.3.0
@commnet 阅读本文前需要对前端知识有一定的了解
@comment 本文内容只提供参考，建议结合openlayers官网的API和examples来学习
@comment 部分代码参考了@老胡

地图分辨率，也称地面分辨率（Ground Resolution）或空间分辨率（Spatial Resolution），表示屏幕上一个像素（pixel）所代表的实际地面距离（米）。

每一个分辨率，有一个对应的缩放等级，openlayers最大支持29级分辨率。

在ol中，可通过ol.View的zoom、minZoom和maxZoom参数来设置地图的缩放等级。

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: [-13553864, 5918250],
        //设置地图当前缩放级别
        zoom: 11,
        //设置地图最小缩放级别
        minZoom: 3,
        //设置地图最大缩放级别
        maxZoom: 13
    })
});

ol允许通过map.getView().getZoom()和map.getView().setZoom()来获取和设置地图的缩放级别，因此可以考虑创建两个按钮，分别控制地图视角的放大和缩小。效果如下：

创建地图容器和放大、缩小按钮

<div id="map"></div>
<button id="zoom-in">放大</button>
<button id="zoom-out">缩小</button>

设置按钮的位置

#zoom-in {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 50px;
}

#zoom-out {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 20px;
}

js逻辑

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 2
    })
});

document.getElementById('zoom-in').onclick = function () {
    //获取地图当前的view对象
    var view = map.getView();
    //获取地图当前的缩放级别
    var zoom = view.getZoom();
    //重置地图的缩放级别
    view.setZoom(zoom + 1);
};

document.getElementById('zoom-out').onclick = function () {
    //获取地图当前的view对象
    var view = map.getView();
    //获取地图当前的缩放级别
    var zoom = view.getZoom();
    //重置地图的缩放级别
    view.setZoom(zoom - 1);
};