打開圖層3縮放地圖事件處理程序

Question

我需要在Open Layers 3中處理縮放事件。

以下是我的代碼：

map_object = new ol.Map({
target: 'map',
controls: controls_list,
interactions: interactions_list,
overlays: [overlay],
layers: [OSM_raster, WFS_layer],
    view: view
});


map_object.on("Zoom", function() {
  console.log('Zooming...');
});

此代碼運行時沒有錯誤並顯示一個映射，但沒有輸出到控制台，表明此功能未觸發。

我也嘗試過：

map_object.on("drag", function() {
  console.log('Dragging...');
});

這也沒有做任何事情。

任何有關如何處理OL3中的地圖控制事件的幫助將非常受歡迎（特別是縮放！）。 注意我已嘗試'zoom'以及'zoom'作為on方法的type字段。

Answer 1

只是為了補充一點，你可以檢查'propertychange'可用的事件的變化，從我所看到的，沒有明確的.on ('zoom', ...)但你可以訪問'resolution'和其他屬性如前評論中所述：

map.getView().on('propertychange', function(e) {
   switch (e.key) {
      case 'resolution':
        console.log(e.oldValue);
        break;
   }
});

Answer 2

嘗試使用moveend事件。 （參見https://openlayers.org/en/latest/apidoc/module-ol_MapEvent-MapEvent.html#event:moveend ）。

Answer 3

你可以管理moveend事件......

我們需要一個全局變量來分配地圖的視圖縮放級別。 我把它命名為currentZoomLevel。

有一個moveend事件。 讓我們使用它，並添加縮放級別檢查功能..

如果有新的縮放級別，我們會觸發一個zoomend事件到DOM的文檔。

最后，我們需要將zoomend偵聽器添加到document元素中。

 var = currentZoomLevel; map.on('moveend', checknewzoom); function checknewzoom(evt) { var newZoomLevel = map.getView().getZoom(); if (newZoomLevel != currentZoomLevel) { currentZoomLevel = newZoomLevel; $(document).trigger("zoomend", zoomend_event); } } $(document).on('zoomend', function () { console.log("Zoom"); //Your code here }); 

資源

Answer 4

正如tonio所提到的，監聽縮放變化的方式（在openlayers術語中稱為分辨率變化）就是這樣的

map.getView().on('change:resolution', (event) => {
    console.log(event);
});

我發現這比聽一般的propertychange變更更好（更簡潔，更少瑕疵），並且如果變化涉及解決方案，則手動驗證。

這在使用鼠標按鈕時會快速觸發，因此在啟動等待其更改的任何計算之前限制它可能是一個好主意。

View的文檔