网站建设业务培训资料,计算机前端和后端区别,wordpress 博客主题推荐,潍坊做网站哪家好在实际开发中我们常常需要根据不同的缩放级别设置不同的展示效果或者执行不同的操作#xff0c;因此侦听缩放级别的变化就很重要。想要侦听变化就需要依赖于OpenLayers中的事件系统#xff0c;下面我将介绍两个相关的事件。
一、地图事件 moveend
1.介绍
在地图的移动结束…在实际开发中我们常常需要根据不同的缩放级别设置不同的展示效果或者执行不同的操作因此侦听缩放级别的变化就很重要。想要侦听变化就需要依赖于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事件
