打开图层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

尝试与moveend事件。 （见https://openlayers.org/en/latest/apidoc/module-ol_MapEvent-MapEvent.html#event:moveend）。

Answer 2

只是为了补充一点，你可以检查'propertychange'可用事件的变化，从我所看到的，没有明确的.on ('zoom', ...)，而是你可以访问'resolution'和其他属性，如前面的评论所述：

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

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
});

Source

Answer 4

作为mentioned的tonio，听取缩放变化的方式，即openlayers术语中的分辨率变化，就是

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

我发现这比听一般的propertychange更好（更简洁，更少瑕疵），并且如果变化涉及解决方案，则手动验证。

这在使用鼠标按钮时会快速触发，因此在启动等待其更改的任何计算之前限制它可能是一个好主意。

Documentation for View