打开第 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 中处理地图控制事件的帮助将不胜感激（尤其是缩放！）。请注意，我已经为 on 方法的类型字段尝试了“缩放”和“缩放”。

Answer 1

除此之外，您可以检查“propertychange”可用事件的变体，据我所见，没有明确的.on ('zoom', ...)，但您可以访问“分辨率”和前面 cmets 中提到的其他属性：

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

作为tonio的mentioned，监听缩放变化的方式，在openlayers术语中称为分辨率变化，是用

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

我发现这比收听一般的propertychange 并手动验证更改是否涉及解决方案更好（更简洁，更少笨拙）。

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

Documentation for View

Answer 4

您可以管理 moveend 事件...

我们需要一个全局变量来分配地图的视图缩放级别。我有 将其命名为 currentZoomLevel。

有一个 moveend 事件可用。让我们使用它，并添加缩放级别 检查功能..

如果有新的缩放级别，我们会触发 zoomend 事件以 DOM 的文档。

最后，我们需要为文档元素添加 zoomend 监听器。

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