openlayers监听以及获取层级分辨率<!DOCTYPE html> <html lang="en"> <head>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>openlayers监听以及获取层级分辨率</title>
    <!-- 引入js文件 -->
    <script src="./ol-debug.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../v6.14.1/css/ol.css">
    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>

<body>
    <!-- 存放层级与分辨率的数据的盒子 -->
    <div><span>当前层级：</span><span id="zoom"></span><span>分辨率：</span><span id="resolution"></span></div>
    <!-- 存放地图的盒子 -->
    <div id="map" style="width: 100%"></div>
    <script>
        // 声明地图实例
        var map = new ol.Map({
            // 将地图存放在那个盒子之中
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    // 数据源的实例
                    source: new ol.source.OSM({
                    }),
                }),
            ],
            // 视图的实例
            view: new ol.View({
                // 地图显示中心
                center: ol.proj.transform([108, 34], "EPSG:4326", "EPSG:3857"),
                // 缩放等级
                zoom: 8,
            }),
        });
        // 获取视图的分辨率事件
        map.getView().on('change:resolution', function () {
            document.getElementById("zoom").innerHTML = this.getZoom() + ',';
            document.getElementById('resolution').innerHTML = this.getResolution();
        })
        // 将获取到的数据存放到相应的DOM盒子之中
        document.getElementById('zoom').innerHTML = map.getView().getZoom() + ',';
        document.getElementById('resolution').innerHTML = +map.getView().getResolution();
    </script>
</body>

</html>