当前位置：首页 > news >正文

OpenLayers：侦听缩放级别的变化

news 来源：原创 2025/5/5 18:01:00

在实际开发中我们常常需要根据不同的缩放级别设置不同的展示效果或者执行不同的操作，因此侦听缩放级别的变化就很重要。想要侦听变化就需要依赖于OpenLayers中的事件系统，下面我将介绍两个相关的事件。

一、地图事件 moveend

1.介绍

在地图的移动结束后就会触发地图的moveend 事件 (移动结束事件)，而缩放级别的变化也是与地图移动相绑定的，因此在我们进行了缩放地图等操作后，地图的缩放级别就会发生变化，同时也会触发moveend事件。

2.使用

  //侦听zoom的变化map.on("moveend", () => {const view = map.getView();const zoom = view.getZoom();console.log("moveend:" + zoom);});

movend事件

二、视图事件 change:resolution

1.介绍

moveend 事件只能说是间接的反映 zoom 的变化，有一个直接反映 zoom 变化的事件，就是视图的change:resolution(分辨率变化事件) 。这个事件会在视图的分辨率发生变化的时候触发。

为什么OpenLayers中没有change:zoom事件呢? 又为什么我们可以用 change:resolution事件来替代change:zoom事件呢? 这主要是因为在OpenLayers的视图中并不会存储 zoom 只会存储分辨率，zoom 都是根据分辨率换算而来，在视图中会存储了一个列表记录了每个 zoom 级别所对应的分辨率。因此 zoom 与分辨率是直接相关的，我们就可以把 change:resolution事件近似的看做 change:zoom事件。

相比与moveend 事件，change:resolution事件只会在地图缩放的时候触发，地图平移或旋转时不会触发。但是每次缩放的时候change:resolution事件会多次触发（因为一次缩放操作会对应多次的分辨率变化），而moveend 事件在同样的情况下则只会触发一次。

2.使用

  //侦听zoom的变化map.getView().on("change:resolution", () => {const zoom = map.getView().getZoom();const resolution = map.getView().getResolution();console.log("zoom:" + zoom, "resolution:" + resolution);});

changeRelution事件