Javascript 打开第 3 层缩放地图事件处理程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26734512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open Layers 3 Zoom map event handler
提问by Single Entity
I need to handle a zoom event in Open Layers 3.
我需要在 Open Layers 3 中处理缩放事件。
The following is my code:
以下是我的代码：
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...');
});
This code runs with no errors and shows a map, but there is no output to the console, suggesting this function isn't firing.
此代码运行时没有错误并显示地图，但控制台没有输出，表明此函数未触发。
I have also tried:
我也试过：
map_object.on("drag", function() {
console.log('Dragging...');
});
And this too does nothing.
这也无济于事。
Any help as to how to handle map control events in OL3 would be much appreciated (particularly zooming!). Note I have tried 'zoom' as well as 'Zoom' for the type field of the on method.
任何有关如何在 OL3 中处理地图控制事件的帮助将不胜感激（尤其是缩放！）。注意我已经为 on 方法的类型字段尝试了“缩放”和“缩放”。
采纳答案by tonio
try with moveendevent. (see https://openlayers.org/en/latest/apidoc/module-ol_MapEvent-MapEvent.html#event:moveend).
尝试moveend事件。（参见https://openlayers.org/en/latest/apidoc/module-ol_MapEvent-MapEvent.html#event:moveend）。
回答by ako977
Just to add to this, you can check variations of events available with 'propertychange', from what I am seeing, there is no explicit .on ('zoom', ...)but rather you can access 'resolution' and other properties as mentioned in previous comments:
只是为了补充一点，您可以检查“propertychange”可用的事件变体，从我所看到的，没有明确的，.on ('zoom', ...)但您可以访问“分辨率”和前面评论中提到的其他属性：
map.getView().on('propertychange', function(e) {
switch (e.key) {
case 'resolution':
console.log(e.oldValue);
break;
}
});
回答by Félix Gagnon-Grenier
As mentionedby tonio, the way to listen on zoom change, which is called resolution changein openlayers terminology, is with
正如tonio所提到的，监听缩放变化的方式，在 openlayers 术语中称为分辨率变化，是用
map.getView().on('change:resolution', (event) => {
console.log(event);
});
I find this is better (more succinct, less cruft) than listening on the general propertychangeand verifying manually if the change concerns resolution.
我发现这比听取一般情况propertychange并手动验证更改是否涉及解决方案更好（更简洁，更少繁琐）。
This fires rapidly when using the mouse button so throttling it might be a good idea before launching any computation that waits for it to change.
这在使用鼠标按钮时会迅速触发，因此在启动任何等待其更改的计算之前进行节流可能是一个好主意。
回答by trucheromayor
You can manage the moveend event...
您可以管理 moveend 事件...
We will need a global variable to alocate map's view zoom level. I've named it as currentZoomLevel.
There is available a moveend event. Let's use it, and add a zoom level check function..
In case of there's a new zoom level, we trigger a zoomend event to DOM's document.
Finally we will need to add zoomend listener to the document element.
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 });
我们需要一个全局变量来分配地图的视图缩放级别。我将其命名为 currentZoomLevel。
有一个 moveend 事件可用。让我们使用它，并添加缩放级别检查功能..
如果有新的缩放级别，我们会触发 DOM 文档的 zoomend 事件。
最后，我们需要向文档元素添加 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 });
