在實際開發中我們常常需要根據不同的縮放級別設置不同的展示效果或者執行不同的操作,因此偵聽縮放級別的變化就很重要。想要偵聽變化就需要依賴于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事件