限制地图缩放级别

有时无限制地允许用户缩小或者放大地图,并不是一种明智的做法,在地图上的feature、标注、图形等都会变的不便于查看。为此,适中的地图缩放级别是被大多数场景所需要的。下面演示地图你只能在10到14级进行缩放。

缩放试试便知,地图现在不能无限缩小放大了,代码也是非常的简单:

<body>
    <div id="map" style="width: 100%"></div>
    <script>
      new ol.Map({
            layers: [
                new ol.layer.Tile({source: new ol.source.OSM()})
            ],
            view: new ol.View({
                // 设置成都为地图中心
                center: [104.06, 30.67],
                projection: 'EPSG:4326',
                zoom: 10,
                // 限制地图缩放最大级别为14,最小级别为10
                minZoom: 10,
                maxZoom: 14
            }),
            target: 'map'
      });
    </script>
</body>

很多初学者问这个问题,其实仔细阅读一下API文档就会知道如何编码,以至于很多已经知道这个功能的其他开发者不愿意回答这么基础的功能。如果只是显示最小级别则只用设置minZoom的值即可,反之只设置maxZoom的值。

除了使用minZoommaxZoom之外,还可以使用minResolutionmaxResolution,其具体原理和使用,在分辨率小节会有介绍。对于开发者而言,建议使用minZoommaxZoom,简单直接。